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IonicFramework 为 www.aboatapp.com 构 建 了 Prop 移 动 应 用 ， 并 使 用 Famo.us/Angular 为 
www.modelrevolt.com 构 建 了 移动 应 用 。 
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开源 工具 。 
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作为 JavaScript 开发 者 , 现在 是 一 个 激动 人 心 的 时 刻 。 随 着 服务 器 端 JavaScript 开源 社 
区 的 快速 发 展 (在 2013 年 12 月 ，NodeJS 包 管 理 器 拥有 50 000 个 包 ， 而 到 了 2014 年 10 月 
这 个 数字 增加 了 一 倍 )， 下 一 代 客 户 端 框架 的 流行 (例如 AngularJS)， 完 全 基于 JavaScript 构 
建 Web 工具 的 公司 数量 不 断 增长 ， 对 JavaScript 语言 技能 的 需求 也 不 断 增多 。 现 代 工 具 允 
许 我 们 使 用 一 种 语言 构建 复杂 的 、 基 于 浏览 器 客户 端的 高 度 并 发 服务 器 ， 甚 至 是 混合 的 原 
生 移动 应 用 。AngularJS 迅速 成 为 主流 的 下 一 代 客 户 端 Web 框架， 它 允 许 个 人 、 小 团队 和 
大 型 公司 构建 和 测试 基于 浏览 器 的 复杂 应 用 。 


AngularJS 介绍 


随 着 JavaScript 社 区 的 快速 发 展 ，AngularJS 在 2012 年 6 月 发 布 1.0 版 本 时 横 空 出 世 。 尽 管 
它 是 一 个 较 新 的 框架 ， 但 它 在 构建 应 用 时 提供 了 强大 的 特性 和 优雅 的 工具 ， 这 使 它 成 为 许 
多 开发 者 选择 的 前 端 框 架 。AngularJS 最 初 由 Google 的 测试 工程 师 Misko Hevery 开 发 ， 他 发 
现 现 有 的 工具 (例如 jQuery) 很 难 构 建 出 需要 显示 大 量 复杂 数据 的 浏览 器 用 户 界面 (User 
Interface，UI)。Google 现 在 有 一 个 专门 的 团队 用 于 开发 和 维护 AngularJS 以 及 相关 的 工具 。 
一 些 活跃 的 Google 应 用 也 是 使 用 AngularJS 开 发 的 , 从 DoubleClick Digital Marketing Platform 
到 PlayStation 3 上 的 YouTube 应 用 。AngularJS 的 人 气 在 迅速 增长 : 到 2014 年 10 月 ，Quantcast 
Top10k 网 站 中 有 143 个 都 使 用 了 AngularJS， 并 迅速 超过 了 最 接近 的 对 手 : KnockoutJS、 
ReacUS 和 EmberJS 。 

那么 AngularJS 特 别 之 处 在 哪里 呢 ? 从 https:Wangularjs.org/ 网 站 中 借用 一 个 对 AngularJS 
特别 简洁 的 描述 :“ 写 更 少 的 代码 ， 早 点 去 喝 啤 酒 ”。AngularJS 的 核心 是 一 个 称 为 “双向 数 
据 绑 定 ”的 概念 ， 通 过 它 可 将 超 文本 标记 语言 (Hypertext Markup Language，HTML) 和 层 登 
样式 表 (Cascading Style Sheet，CSS) 绑 定 到 JavaScript 变 量 的 状态 。 无 论 何 时 变量 发 生 了 变 
化 ，AngularJS 都 将 更 新 所 有 应 用 了 该 JavaScript 变 量 的 HTML 和 CSS， 如 下 面 的 代码 所 示 : 


<div ng-show="shouldShow" >Hello</div> 


如 果 变 量 shouldShow 被 改 为 false，AnegularJS 将 自动 隐藏 div 元 素 。 变 量 shouldShow 
并 没有 什么 特殊 之 处 : AngularJS 不 要 求 在 特殊 类 型 中 封装 变量 ， 变 量 shouldShow 可 以 是 
一 个 普通 的 JavaScript 布尔 值 。 

尽管 双向 绑 定 是 AngularJS 的 基础 ， 但 它 只 是 冰山 一 角 。AngularJS 提供 了 一 个 优雅 的 
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框架 ， 可 以 通过 一 种 最 大 化 重用 性 和 测试 性 的 方式 来 组 织 客 户 端 JavaScript。 另 外 ， 
AngularJS 有 一 组 丰富 的 测试 工具 ， 例 如 Karma、protractor 和 ngScenario( 参 见 第 9 章 )， 它 
们 已 经 做 了 优化 以 便 用 于 AngularJS。AngularJS 专注 于 可 测试 的 架构 和 丰富 的 测试 工具 ， 
这 使 它 成 为 关键 客户 端 JavaScript 的 自然 选择 。 它 不 仅 可 以 使 你 快速 编写 复杂 的 应 用 ， 还 
提供 了 工具 和 结构 ， 使 应 用 的 测试 变 得 非常 容易 。 事 实 上 ，Google 的 DoubleClick 团队 将 
AngularJS 的 “full testing story” 引 用 为 将 它 的 数字 营销 平台 迁移 到 AngularJS 的 6 个 最 重 
要 原因 之 一 。 下 面 是 对 AngularJS 特点 的 一 些 简单 概述 。 


双向 数据 绑 定 


在 许多 较 老 的 客户 端 JavaScript 库 ( 例 如 jQuery 和 Backbone) 中 ， 我 们 希望 自己 操作 文 
档 对 象 模型 (Document Object Model，DOM)。 换 句 话说 ， 如 果 和 希望 改变 div 元 素 的 HTML 
内 容 ， 需 要 自己 编写 必需 的 JavaScript。 例 如 : 


$('div') .html ('Hello, world!'); 


AngularJS 反 转 了 这 个 模式 ， 使 HTML 成 为 如 何 显示 数据 的 明确 来 源 。 双 向 数据 绑 定 的 
主要 目的 是 将 HTMIL 或 CSS 属 性 (例如 ，div 元 素 的 HTML 内 容 或 背景 颜色 ) 绑 定 到 JavaScript 
变量 的 值 。 当 JavaScript 变 量 的 值 改变 时 ，HTML 或 CSS 属 性 将 随 之 更 新 。 反 之 亦 然 ， 如 果 
用 户 在 input 字 段 中 输入 ， 被 绑 定 的 JavaScript 变 量 的 值 将 被 更 新 为 用 户 输入 的 内 容 。 例 如 ， 
下 面 的 HTML 将 问候 输入 字段 中 输入 的 名 字 。 可 以 在 相应 章节 的 样 例 代 码 data_binding.html 
中 找到 该 样 例 ， 简单 地 右 击 该 文件 ， 并 在 浏览 器 中 打开 它 一 一 不 需要 Web 服 务 器 或 其 他 
依赖 ! 


<input type="text" ng-model="user" placeholder="Your Name"> 
<h3>Hello, {{user}} !</h3> 


不 需要 使 用 JavaScript! 指令 ngModel 和 {{}} 简 写 语法 将 完成 所 有 工作 。 在 这 个 简单 的 
样 例 中 ，AngularJS 体现 出 的 优点 非常 有 限 , 但 在 第 1 章 构建 一 个 真正 的 应 用 时 ， 你 将 看 到 
数据 绑 定 将 极 大 地 简化 JavaScript。 多 亏 了 数据 绑 定 , 否则 我 们 就 很 难 将 800 行 的 jQuery 意 
大 利 面条 式 代 码 简化 成 40 行 清晰 的 、 独 立 于 DOM 的 AngularJS 代码 。 


DOM 作用 域 


DOM 作用 域 是 AngularJS 另 一 个 强大 的 特性 。 你 可 能 已 经 猜 到 ,数据 绑 定 并 不 是 免费 
的 午餐 ; 代码 复杂 性 一 定 会 被 转移 到 某 个 地 方 。 不 过 ，AngularJSs 允许 在 DOM 中 创建 作用 
域 ， 它 的 行为 类 似 于 JavaScript 和 其 他 编程 语言 中 的 作用 域 。 这 将 允许 我 们 把 HTML 和 
JavaScript 分 割 成 独立 的 、 可 重用 的 块 。 例 如 ， 下 面 的 样 例 实现 的 功能 与 之 前 样 例 的 功能 相 
同 , 但 使 用 了 两 个 不 同 的 作用 域 : 一 个 用 于 使 用 英文 进行 问候 ， 另 一 个 使 用 的 是 西班牙 语 。 
<div ng-controller="HelloController" > 


<input type="text" ng-model="user" placeholder="Your Name"> 
<h3>Hello, {{user}}!</h3> 


到 
芭 


</div> 


<hr> 

<div ng-controller="HelloController" > 
<input type="text" ng-model="user" placeholder="Su Nombre"> 
<h3>Hola, {{user}}!</h3> 

</div> 


<script type="text/javascript" 
src="angular.js"> 
</script> 
<script type="text/javascript"> 
functionHelloController ($scope) {} 
</script> 


指令 ngController 是 一 种 创建 新 作用 域 的 方式 ， 通 过 它 可 将 相同 的 代码 为 不 同 的 目的 进 
行 重用 。 第 4 章 包 含 了 对 双向 数据 绑 定 的 全 面 概 述 ， 并 对 内 部 实现 细节 进行 了 讨论 。 


指令 


指令 是 将 HIML 和 JavaScript 功 能 组 装 成 一 个 可 轻松 重用 的 包 的 强大 工具 。AngularJS 拥 
有 大 量 内 建 指令 ， 例 如 之 前 看 到 的 ngController 和 ngModel， 通 过 他 们 可 在 HIML 中 访问 复 
杂 的 JavaScript 功 能 。 也 可 以 编写 自己 的 自 定义 指令 。 AngularJS 人 允许 将 HTML 与 指令 相关 联 ， 
因此 可 以 使 用 指令 作为 一 种 重用 HTML 的 方式 ， 以 及 一 种 将 特定 行为 绑 定 到 双向 数据 绑 定 
的 方式 。 编 写 自 定义 指令 超出 了 该 简介 的 范围 ， 但 第 5 章 包含 了 该 主题 的 全 面 概述 。 


模板 


在 双向 数据 绑 定 之 上 ,AngularJS 允许 根据 JavaScript 变量 的 状态 蔡 换 页 面 的 整个 部 分 。 
指令 ngInclude 允许 有 条 件 地 包含 模板 ， 根 据 JavaScript 的 状态 在 页 面 中 注入 AngularJS 
HTML 片段 。 下 面 的 样 例 演示 了 一 个 包含 了 一 个 div 元 素 的 页 面 ,其 中 包含 基于 myTemplate 
变量 值 的 不 同 HTML。 可 在 相应 章节 的 样 例 代码 的 templates.html 中 找到 该 样 例 : 


<div ng-controller="TemplateController"> 
<div ng-include="myTemplate"> 
</div> 
<br> 
<a ng-click="myTemplate = 'templatel';" 
style="cursor: pointer" 


ng-class="{"selected’: myTemplate === "templatel" }"> 
Display Template 1 
</a> 


<a ng-click="myTemplate = 'template2';" 
style="cursor: pointer" 


ng-class="{"selected": myTemplate === "template2" }"> 
Display Template 2 
</a> 


</div> 


VI 
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<script type="text/javascript" 
src="angular.js"> 

</script> 

<script type="text/javascript"> 
functionTemplateController($scope) { 

$scope.myTemplate = 'templatel'; 

} 

</script> 

<script type="text/ng-template" id="templatel"> 
<hl>This is Template 1</h1> 

</script> 

<script type="text/ng-template" id="template2"> 
<hl>This is Template 2</h1> 

</script> 


第 6 章 包含 了 AngularJS 模板 的 完整 讨论 ， 包 括 如 何 使 用 它们 构建 单 页 面 应 用 。 
测试 和 工作 流 


提供 一 个 框架 用 于 编写 可 以 进行 单元 测试 的 代码 一 直 是 AngularJS 从 首次 发 布 开始 的 
目标 。AngularJS 包含 一 个 优雅 、 复 杂 的 依赖 注入 器 ， 而 且 所 有 的 AngularJS 组 件 ( 控 制 器 、 
指令 、 服 务 和 过 滤器 ) 都 是 使 用 依赖 注入 器 构造 的 。 这 将 保证 在 测试 时 ， 如 果 需 要 我 们 可 以 
轻松 蔡 换代 码 依赖 。 另 外, AngularJS 团队 已 经 开发 了 大 量 强大 的 测试 工具 , 例如 Karma test 
runner 和 protractor 以 及 ngScenario 集成 测试 框架 。 这 些 工具 带 来 了 复杂 的 多 浏览 器 测试 基 
础 设施 ， 这 在 之 前 只 有 大 型 公司 可 以 实现 ， 现 在 开发 者 个 人 也 可 以 实现 。 

另外 , AngularJS 的 架构 和 测试 工具 可 与 各 种 开源 JavaScript 构 建 和 工作 流 工具 优雅 地 进 
行 交 互 ， 例 如 Gulp 和 Grunt。 通 过 使 用 这 些 工 具 ， 我 们 可 以 无 颖 地 执行 测试 、 在 测试 执行 中 
绑 定 代码 覆盖 和 linting 这 样 的 工具 ， 甚 至 从 头 开始 搭建 新 的 应 用 。 核 心 AngularJS 只 是 一 个 
库 ， 但 是 围绕 它 的 测试 和 工作 流 工 具 使 AngularJS 生 态 系统 成 为 一 个 整体 ， 一 种 用 于 构建 基 
于 浏览 器 客户 端的 创新 模式 。 第 9 章 对 可 在 AngularJS 应 用 中 使 用 的 AngularJS 测 试 生态 系统 
和 不 同类 型 的 测试 策略 进行 了 详 述 。 


不 适合 使 用 AngularJS 的 场景 


与 任何 其 他 库 一 样 ，AngularJS 非常 适用 于 一 些 应 用 ， 而 不 太 适 用 于 其 他 应 用 。 在 下 一 
节 , 将 学 习 几 个 非常 适用 于 AngularJS 的 用 例 。 在 本 节 , 将 学 习 AngularJS 不 太 适 用 的 一 些 
情形 ， 并 了 解 AngularJS 的 一 些 限制 。 
需要 支持 旧版 Internet Explorer 的 应 用 


AngularJS 的 这 个 限制 对 于 一 些 用 户 来 说 可 能 非常 重要 ， 因 为 它 不 支持 旧版 Internet 
Explorer。AngularJS 1.0.x 支 持 Internet Explorer 6 和 7， 但 是 本 书 中 将 学 习 的 版 本 AngularJS 


D 


前 


1.2.x 只 支持 Internet Explorer 8 以 及 更 新 版 本 。 此 外 ，AngularJS 目 前 的 实验 版 本 AngularJS 
1.3.x 完 全 放弃 了 对 Internet Explorer 8 的 支持 (它们 只 支持 Internet Explorer 9 和 更 新 版 本 )。 如 
果 你 的 应 用 需要 支持 Intemet Explorer 7， 那 么 使 用 AngularJS 并 不 是 正确 之 选 。 


不 需要 JavaScript 服务 器 I/O 的 应 用 


AngularJS 是 一 个 极其 丰富 和 强大 的 库 ， 狂 热 的 用 户 通 常会 尝试 在 所 有 的 应 用 中 使 用 
它 。 不过， 许多 情况 下 使 用 AngularJS 都 有 点 大 材 小 用 了 ， 而 且 增 加 了 不 必要 的 复杂 性 。 
例如 ， 如 果 需 要 在 页 面 中 添加 一 个 按钮 ， 当 用 户 单 击 它 时 显示 或 隐藏 一 个 div 元 素 ， 那 么 
使 用 AngularJS 并 不 能 帮助 你 ， 除 非 你 需要 持久 化 页 面 URL 中 或 者 发 送 到 服务 器 的 div 状 
态 。 与 此 类 似 ， 选 择 使 用 AngularJS 编写 博客 通常 是 一 个 糟糕 的 决定 。 博 客 通常 以 有 限 的 
交互 方式 显示 出 简单 数据 ， 所 以 使 用 AngularJS 通常 是 不 必要 的 。 另 外 ， 博 客 要 求 与 搜索 
引擎 进行 良好 的 集成 。 如 果 使 用 AngularJS 编写 博客 的 话 ， 还 需要 完成 一 些 额外 的 工作 ( 参 
见 第 6 章 ), 以 保证 搜索 引擎 可 以 高 效 地 疏 取 博客 内 容 , 因为 搜索 引擎 疏 虫 不 执行 JavaScript。 


AngularJS 适用 的 场景 


现在 我 们 已 经 了 解 了 AngularJS 的 一 些 限制 , 接 下 来 将 学 习 的 是 一 些 AngularJS 非常 适 
用 的 用 例 。 


内 部 数据 密集 型 应 用 


对 于 需要 在 浏览 器 UI 中 显示 复杂 数据 的 应 用 来 说 ，AngularJS 是 一 个 极其 有 用 的 强大 
工具 ， 例 如 持续 集成 框架 或 产品 仪表 盘 。 为 这 些 应 用 开发 UI 的 挑战 在 于 编写 重要 的 
JavaScript， 在 每 次 数据 改变 时 正确 地 泻 染 数据 。 通 过 使 用 双向 数据 绑 定 ， 我 们 不 必 再 编写 
这 样 的 胶水 代码 ， 就 可 以 编写 出 更 简洁 和 易于 阅读 的 JavaScript。 当 我 们 编写 第 1 章 展 示 的 
股票 市 场 仪表 盘 时 ， 将 会 看 到 通过 双向 数据 绑 定 和 指令 构建 出 一 个 需要 显示 大 量 数据 的 应 
用 是 非常 简单 的 。 
移动 网 站 

AngularJS 为 大 多 数 常见 的 移动 浏览 器 提供 了 扩展 支持 (Android、Chrome Mobile、iOS 
Safari)。 而 且 ， 在 第 6 章 你 将 看 到 AngularJS 有 一 些 强大 的 动画 支持 和 单 页 面 应 用 (通过 它 ， 
我 们 可 以 利用 浏览 器 缓存 来 尽量 减少 带宽 的 使 用 )。 这 将 使 我 们 可 以 构建 快速 的 、 高 效 模拟 
原生 应 用 的 移动 Web 应 用 。 另 外 ， 通 过 使 用 Ionic 这 样 的 框架 ， 我 们 还 可 以 构建 混合 移动 应 
用 : 使 用 JavaScript 编 写 应 用 (使 用 AngularJS)， 但 是 通过 Android 和 iPhone 应 用 商店 发 布 。 
构建 原型 


一 个 在 本 书 中 多 次 出 现 的 主题 是 使 用 双向 数据 绑 定 在 前 端 JavaScript 工程 和 用 户 界面 / 
用 户 体验 (UVUX) 设 计 之 间 创 建 有 效 的 分 离 。 通 过 双向 数据 绑 定 ， 前 端 JavaScript 工程 师 可 
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以 公开 一 个 应 用 编程 接口 ， 然 后 UVUX 设计 师 就 可 以 在 HTML 中 访问 它们 ， 从 而 使 前 端 
工程 师 和 设计 师 都 能 在 最 佳 环境 中 工作 ， 而 不 必 介入 彼此 的 工作 。 在 快速 构建 原型 浏览 器 
UI 时 ,这 尤其 有 用 , 因为 我 们 可 以 高 效 地 并 行 安排 任务 ,使 团队 平稳 地 运行 .另外 ,AngularJS 
丰富 的 测试 生态 系统 将 使 我 们 可 以 保证 高 测试 覆盖 率 ， 从 而 确保 在 展示 原型 时 不 会 出 现 明 
显 的 问题 。 


如 何 使 用 本 书 


现在 你 已 经 看 到 了 AngularJS 库 变 得 如 此 流行 的 原因 ， 接 下 来 是 对 本 书 内 容 的 概述 ， 
你 将 从 中 了 解 到 从 编写 初级 AngularJS 到 专业 级 AngularJS 的 所 有 内 容 。 

可 将 本 书 看 成 学 习 AngularJS 的 一 本 “选择 个 人 冒险 ”的 书籍 。 如 果 你 是 一 个 AngularJS 
初学 者 ， 通 过 顺序 阅读 本 书 你 将 获得 大 量 信息 ， 因 为 这 些 章节 提供 了 从 头 开始 学 习 
AngularJS 的 逻辑 序列 。 不 过 ,这 些 章节 和 它们 的 样 例 基本 上 被 设计 为 相对 独立 的 。 如 果 你 
熟悉 AngularJS 并 且 在 寻找 拓展 自己 某 个 特定 领域 技能 的 知识 ,例如 使 用 测试 框架 (第 9 章 )， 
那么 可 以 直接 跳 到 合适 的 章节 并 忽略 中 间 的 章节 。 某 些 样 例 在 章节 之 间 是 共享 的 ， 但 每 个 
章节 都 解释 了 样 例 的 某 块 代码 (假设 你 之 前 从 未 见 过 它 )。 而 且 ， 一 些 章节 将 引用 其 他 章节 
的 信息 ， 但 它们 总 是 提供 了 所 需 概念 的 简略 概述 。 无 论 你 是 刚刚 开始 学 习 AngularJS 还 是 
在 寻找 特定 主题 ， 本 书 都 允许 你 直接 跳 到 最 有 用 的 信息 (不 过 ， 如 果 你 是 一 个 初学 者 ， 在 跳 
到 其 他 章节 之 前 应 该 先 阅读 第 1 章 )。 下 面 对 每 章 内 容 做 一 些 简单 强调 。 


第 1 章 : 构建 简单 的 AngularJS 应 用 

该 章 是 面向 初学 者 的 。 将 使 用 AngularJS 从 头 开始 构建 一 个 股票 市 场 仪表 盘 应 用 ， 并 
获得 对 接 下 来 章节 所 涵盖 话题 的 高 级 概述 。 
第 2 章 : 智能 工作 流 和 构建 工具 


该 章 将 讲解 许多 用 于 搭建 AngularJS 应 用 、 自 动 化 工作 流 、 添 加 外 部 依赖 的 开源 工具 。 
该 章 将 特别 强调 流行 的 搭建 工具 Yeoman, 它 不 仅 能 使 我 们 可 以 快速 启动 新 的 AngularJS 应 
用 ， 还 提供 了 管理 工作 流 的 强大 工具 。 
第 3 章 : 架构 

该 章 提供 了 构建 AngularJS 组 件 最 佳 实践 的 概述 ， 包 括 如 何在 服务 、 控 制 器 和 指令 之 
间 传 递 数据 。 另 外 ， 该 章 浏览 了 不 同 规模 应 用 的 目录 结构 的 最 佳 实践 。 最 后 ， 该 章 涵盖 了 
两 个 管理 文件 依赖 的 流行 工具 : RequireJS 和 Browserify。 
第 4 章 : 数据 绑 定 

尽管 AngularJS 数据 绑 定 非常 优雅 和 直观 , 但 是 中 级 AngularJS 开发 者 可 以 通过 深入 了 
解数 据 绑 定 的 实际 实现 方式 而 获得 进步 。 该 章 浏览 了 如 何 构建 AngularJS 作用 域 ， 以 及 


$digest 循环 的 实现 细节 ， 从 而 使 我 们 可 以 避免 常见 的 数据 绑 定 陷阱 。 该 章 还 包含 了 过 滤器 
的 概述 ， 包 括 相 关 用 例 和 常见 的 错误 。 
第 5 章 : 指令 

该 章 的 前 半 部 分 提供 了 如 何 编写 自 定 义 AngularJS 指令 的 基本 知识 ， 并 浏览 了 指令 的 
各 种 用 例 。 后 半 部 分 则 专注 于 使 用 诸如 嵌入 (transclusiom) 的 工具 设计 更 高 级 的 指令 。 
第 6 章 : 模板 、 位 置 和 路 由 

该 章 的 主要 目的 是 提供 如 何 使 用 AngularJS 编写 单 页 面 应 用 的 概述 ， 这 种 应 用 允许 用 
户 在 多 个 “视图 ”之 间 进 行 转换 ， 而 不 必 重 新 加 载 页 面 。 为 创建 单 页 面 应 用 ， 该 章 详 述 
AngularJS 模板 、 模 板 缓存 和 $location 服务 。 该 章 还 提供 了 使 用 AngularJS CSS3 动画 的 概 
述 ， 以 及 介绍 如 何 通过 使 用 Prerender 让 单 页 面 应 用 变 得 对 搜索 引擎 友好 。 
第 7 章 : 服务 、 工 厂 和 提供 者 

该 章 对 使 用 AngularJS 创建 服务 的 各 种 不 同方 法 进行 了 详尽 描述 。 我 们 还 将 学 习 服务 
在 底层 是 如 何 工作 的 ， 以 及 如 何 利用 服务 的 内 部 实现 。 


第 8 章 : 服务 器 通信 


该 章 将 使 用 基本 的 服务 和 拦截 器 创建 一 个 登录 系统 。 另 外 ， 还 将 学 习 如 何 使 用 
StrongLoop 的 Loopback API 启动 一 个 简单 后 端 , 并 使 用 客户 端 AngularJS 应 用 和 Loopback 
API 集成 Facebook 登录 。 


第 9 章 : 测试 和 调试 AngularJS 应 用 

该 章 包 含 了 使 用 流行 的 开源 测试 运行 器 Karma 为 AngularJS 应 用 构建 单元 测试 和 DOM 集 
成 测试 (也 称 为 halfway test) 的 详尽 描述 。 该 章 还 讨论 了 开源 的 行为 驱动 开发 (Behavior-Driven 
Development，BDD) 测 试 框架 Mocha 和 Jasmine， 并 解释 了 如 何在 SauceLab 的 浏览 器 云 中 运 
行 测 试 。 
第 10 章 ， 继续 前 和 

该 章 包 含 了 对 几 个 流行 开源 模块 的 概述 , 通过 它们 ,AngularJS 可 以 实现 一 些 令 人 惊喜 
的 事情 。 尤 其 是 ， 将 学 习 如 何 使 用 Angular-UI Bootstrap 集成 Twitter Bootstrap 组 件 、 如 何 
使 用 AngularJS 和 Ionic 框架 构建 混合 移动 应 用 ， 以 及 如 何在 AngularJS 中 集成 两 个 流行 的 
开源 JavaScript 模块 Moment 和 Mongoose， 还 将 学 习 如 何 结合 使 用 ECMAScript 6 生成 器 
和 AngularJS 的 Shttp 服务 。 


如 何 使 用 本 书 的 样 例 代 码 


本 书 的 每 章 内容 都 有 自己 的 样 例 代码 ， 可 以 在 http://www.wrox.com/go/proangularjs 的 
代码 下 载 部 分 获得 。 每 章 的 开头 都 将 提醒 访问 该 URL 以 下 载 样 例 代 码 , 因此 不 需要 收藏 这 
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个 页 面 。 尽 管 每 章 都 恰当 地 包含 了 文本 形式 的 代码 ， 但 最 好 下 载 每 章 的 样 例 代码 并 自己 尝 
试 这 些 样 例 。 另 外 ,也 可 以 访问 www.tupwk.com.cn/downpage; 再 输入 中 文书 名 或 中 文 ISBN， 
下 载 源 代码 。 

本 书 的 样 例 代 码 被 设计 为 拥有 最 小 的 外 部 依赖 。 每 章 开头 都 解释 了 运行 样 例 代 码 所 需 
的 特殊 依赖 。 对 于 本 书 的 许多 样 例 来 说 ， 只 需要 一 个 现代 浏览 器 即 可 (这 些 样 例 主 要 是 使 用 
Google Chrome 37 和 Mozilla Firefox 32 开发 的 ， 但 是 Internet Explorer 9 和 Safari 6 应 该 也 
足够 使 用 )。 这 些 样 例 都 以 .html 文件 形式 存在 ， 可 以 通过 右 击 文件 并 使 用 file:// 协 议 在 浏览 
器 中 打开 该 文件 。 例 如 ， 为 查看 样 例 代 码 中 的 data_binding.html 样 例 ， 如 果 样 例 代码 在 目 
录 /Users/user/Chapter 0 中 ， 那 么 可 以 访问 file:///Users/user/Chapter%200/data_binding.html。 
除非 特别 指定 ， 否 则 可 以 安全 地 认为 可 以 在 浏览 器 中 打开 本 书 样 例 代码 的 任意 HTML 文件 。 

本 书 的 样 例 代 码 不 要 求 使 用 特殊 的 集成 开发 环境 (IDE)。 尝试 样 例 代码 时 使 用 文本 编辑 
器 (例如 vim 和 SublimeTexb 即 可 。 如 果 喜 欢 ， 也 可 以 使 用 诸如 WebStorm 的 IDE， 但 对 于 
本 书 的 样 例 来 说 ， 使 用 IDE 的 好 处 非常 有 限 。 

本 书 涵盖 的 许多 概念 都 要 求 使 用 Web 服 务 器 。 为 使 整个 过 程 尽 可 能 轻 量 级 ， 本 书 将 使 
用 NodeJS 和 NodeJS 包 管理 器 npm 来 启动 Web 服 务 器 。 另 外 ， 你 将 在 本 书 中 学 到 许多 工具 ， 
例如 Grunt、Prerender 和 Yeoman， 通 过 npm 都 可 以 轻松 安装 它们 。 为 安装 NodeJS， 你 应 该 访 
问 http://nodejs.org/download， 并 按照 对 应 平台 的 指令 进行 安装 。NodeJS 非 常 易 于 安装 ， 并 
且 几 乎 支持 所 有 常见 的 桌面 操作 系统 (包括 Windows); 而 且 ，npm 被 自动 包含 在 了 NodeJS 
中 。 不 过 ， 本 书 要 求 使 用 NodeJS 的 大 部 分 样 例 都 假定 你 正在 使 用 bash shell。Linux 和 OS X 
用 户 可 以 使 用 它们 的 默认 终端 。 在 Windows 中 ， 如 果 你 希望 运行 命令 行 指 令 ， 那 么 应 使 用 
git bash(http://msysgit.github.io)， 这 是 Windows 的 一 个 bash 终 端 ( 记 住 ，NodeJS 并 未 正式 支持 
Cygwin， 所 以 不 推荐 使 用 它 )。 每 章 都 将 演示 如 何 安装 额外 的 依赖 ， 并 在 必要 时 提醒 你 安装 
NodeJS 。 


勘误 


尽管 我 们 已 经 尽 了 各 种 努力 来 保证 文章 或 代码 中 不 出 现 错误 ， 但 是 错误 总 是 难免 的 ， 
如 果 你 在 本 书 中 找到 了 错误 ， 例 如 拼写 错误 或 代码 错误 ， 请 告诉 我 们 ， 我 们 将 非常 感激 。 
通过 勘误 表 ， 可 以 让 其 他 读者 避免 受挫 ， 当 然 ， 这 还 有 助 于 提供 更 高 质量 的 信息 。 

请 给 wkservice@vip.163.com 发 电子 邮件 ,我 们 就 会 检查 你 的 反馈 信息 ， 如 果 是 正确 
的 ， 我 们 将 在 本 书 的 后 续 版 本 中 采用 。 

要 在 网 站 上 找到 本 书 英文 版 的 勘误 表 ， 可 以 登录 http://www.wrox.com/WileyCDA， 通 
过 Search 工具 或 书 名 列表 查找 本 书 ， 然 后 在 本 书 的 细 目 页 面 上 ， 点 击 Errata 链接 。 在 这 个 
页 面 上 可 以 查看 到 Wrox 编辑 已 提交 和 粘贴 的 所 有 勘误 项 。 完 整 的 图 书 列表 还 包括 每 本 书 
的 勘误 表 ， 网 址 是 www.wrox.com/WileyCDA/id_105077.html。 


开 
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p2p.wrox.com 


要 与 作者 和 同行 讨论 , 请 加 入 p2p.wrox.com 上 的 P2P 论坛 。 这 个 论坛 是 一 个 基于 Web 
的 系统 ， 便 于 你 张贴 与 Wrox 图 书 相关 的 消息 和 相关 技术 ， 与 其 他 读者 和 技术 用 户 交 流 心 
得 。 该 论坛 提供 了 订阅 功能 , 当 论 坛 上 有 新 的 消息 时 , 它 可 以 给 你 传送 感 兴趣 的 论题 。Wrox 
作者 、 编 辑 和 其 他 业界 专家 和 读者 都 会 到 这 个 论坛 上 来 探讨 问题 。 

在 http://p2p.wrox.com 上 ， 有 许多 不 同 的 论坛 ， 它 们 不 仅 有 助 于 阅读 本 书 ， 还 有 助 于 
开发 自己 的 应 用 程序 。 要 加 入 论坛 ， 可 以 遵循 下 面 的 步骤 ; 

(1) 进入 p2p.wrox.com， 单 击 Register 链接 。 

(2) 阅读 使 用 协议 ， 并 单 击 Agree 按钮 。 

(3) 填写 加 入 该 论坛 所 需要 的 信息 和 自己 希望 提供 的 其 他 信息 ， 单 击 Submit 按钮 。 

(4) 你 会 收 到 一 封 电子 邮件 ， 其 中 的 信息 描述 了 如 何 验 证 账户 ， 完 成 加 入 过 程 。 


注意 : 
不 加 入 P2P 也 可 以 阅读 论坛 上 的 消息 ， 但 要 张贴 自己 的 消息 ， 就 必须 加 入 该 论坛 。 


加 入 论坛 后 ,就 可 以 张贴 新 消息 ， 响 应 其 他 用 户 张贴 的 消息 。 可 以 随时 在 Web 上 阅读 
消息 。 如 果 要 让 该 网 站 给 自己 发 送 特定 论坛 中 的 消息 ， 可 以 单 击 论坛 列表 中 该 论坛 名 旁边 
的 Subscribe to this Forum 图 标 。 

关于 使 用 Wrox P2P 的 更 多 信息 , 可 阅读 P2PFAQ, 了 解 论坛 软件 的 工作 情况 以 及 P2P 
和 Wrox 图 书 的 许多 常见 问题 。 要 阅读 FAQ， 可 以 在 任意 P2P 页 面 上 点 击 FAQ 链接 。 


源 代码 


在 读者 学 习 本 书 中 的 示例 时 ， 可 手动 输入 所 有 的 代码 ， 也 可 使 用 本 书 附带 的 源 代码 文 
件 。 本 书 使 用 的 所 有 源 代 码 都 可 从 本 书 合作 站 点 http://www.wrox.com/ 或 
www.tupwk.com.cn/downpage 下 载 。 登 录 到 站 点 http://www.wrox.com/， 使 用 Search 工具 或 
使 用 书 名 列表 就 可 以 找到 本 书 。 接 着 单 击 Download Code 链接 , 就 可 以 获得 所 有 的 源 代码 。 
既 可 选择 下 载 一 个 大 的 包含 本 书 所 有 代码 的 ZIP 文件 ， 也 可 以 只 下 载 某 个 章节 中 的 代码 。 


注意 : 
由 于 许多 图 书 的 标题 都 很 类 似 ， 因 此 按 ISBN 搜索 是 最 简单 的 ， 本 书 英文 版 的 ISBN 是 
978-1-118-83207-3。 


在 下 载 代 码 后 , 只 需 用 解压 缩 软件 对 它 进行 解压 缩 即 可 。 另 外, 也 可 以 进入 http://www. 
wrox.com/dynamic/books/download.aspx 上 的 Wrox 代码 下 载 主页 ， 查 看 本 书 和 其 他 Wrox 
图 书 的 所 有 代码 。 
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构建 简单 的 AngularJS 应 用 


本 章 内 容 : 
从 头 开始 创建 一 个 新 的 AngularJS 应 用 
创建 自 定义 控制 器 、 指 令 和 服务 
与 外 部 API 服务 器 通信 
使 用 HTML5 LocalStorage 在 客户 端 存储 数据 
使 用 ngAnimate 创建 一 个 简单 动画 
使 用 GitHub 页 面 打 包 应 用 ， 用 于 发 布 和 部 署 


本 章 的 样 例 代 码 下 载 : 

可 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文件 。 为 更 加 清晰 ， 代 码 下 载 文件 中 为 应 用 构建 指南 的 每 一 步 包 含 了 一 
个 单独 的 目录 。 相关 代码 根 目录 中 的 README.md 文件 包含 了 用 于 正确 使 用 指南 中 每 个 步 
又 代码 的 额外 信息 。 对 于 喜欢 使 用 GitHub 的 开发 者 ， 通 过 访问 http://github.com/ 
diegonetto/stock-dog 页 面 ,可 以 找到 该 应 用 的 仓库 ， 其 中 包含 了 指南 的 每 个 步骤 的 Git 标签 
以 及 详细 文档 。 


1.1 构建 目标 


学 习 AnuglarJS 的 最 佳 方式 就 是 直接 构建 一 个 真正 的 、 可 以 动手 实践 的 应 用 ， 并 在 其 
中 使 用 该 框架 (几乎 ) 所 有 的 关键 组 件 。 本 章 将 构建 StockDog 应 用 ， 这 是 一 个 实时 监控 和 管 
理 股票 监视 列表 的 应 用 。 对 于 不 熟悉 的 人 来 说 ， 该 上 下 文中 的 监视 列表 指 的 就 是 希望 追踪 
的 目标 股票 的 任意 组 合 ， 用 于 分 析 目 的 。 客 户 端 将 使 用 Yahoo Finance API( 应 用 编程 接口 ) 
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获取 实时 股票 报价 信息 。 该 应 用 不 包含 动态 后 端 ， 所 以 所 有 信息 都 将 直接 通过 Yahoo 


Finance 


API 获得 ， 而 对 于 公司 股票 代码 来 说 ， 它 将 被 包含 在 一 个 静态 JSON(JavaScript 


Object Notation) 文 件 中 。 在 本 章 的 末尾 处 ， 应 用 的 用 户 将 可 以 完成 以 下 任务 : 
e 创建 含有 描述 信息 的 自 定义 名 称 监视 列表 
e 添加 来 自 NYSE、NASDAQ 和 AMEX 交易 所 的 股票 
e 实时 监控 股票 价格 改变 
e 使 用 图 表 将 监视 列表 的 投资 组 合 表现 可 视 化 
StockDog 将 由 两 个 主 视图 组 成 ， 可 以 通过 应 用 的 导航 栏 访问 。 仪 表盘 视图 将 用 作 


SotkcDo 


g 的 启动 页 面 ， 允 许 用户 创 建新 的 监视 列表 并 监控 投资 组 合 的 实时 表现 。 该 视图 中 


将 显示 的 4 个 关键 绩效 指标 是 : Total Market Value、Total Day Change、Market Value by 
Watchlist( 饼 状 图 ) 和 Day Change by Watchlist (条 形 图 )。 图 1-1 展示 了 一 个 包含 3 个 监视 列表 


的 样 例 仪表 盘 视 图 。 
StockDog 
©® Watchlists @ Porttolio oveview 
Technology 
Pharmaceutical $3,094.50 
Total Day Change 
Financial 
Market Value by Watchlist Day Change by Watchlist 


Bullt with Y by Diego and Val 


Technology Financial 
Pharmaceutical 


图 1-1 


StockDog 中 创建 的 每 个 监视 列表 都 有 自己 的 监视 列表 视图 , 其 中 包含 一 个 含有 股票 价 


格 信息 和 一 些 基本 运算 的 交互 式 表格 ， 用 于 帮助 监控 股票 仓位 。 这 里 ， 应 用 的 用 户 可 以 在 


已 选择 的 监视 列表 中 添加 新 的 股票 、 监 控 实时 的 股票 价格 (在 交易 时 间 内 )， 并 对 所 拥有 股 
票 的 数量 进行 在 线 编辑 。 图 1-2 展示 了 一 个 追踪 7 只 股票 的 样 例 监视 列表 视图 。 


构 寻 


应 用 的 过 程 将 通过 12 个 步骤 进行 描述 。 每 个 步骤 都 将 关注 开发 StockDog 应 用 的 


一 个 关键 特性 (使 用 其 中 介绍 的 AngularJS 组 件 ), 因为 实现 应 用 定义 的 需求 时 将 需要 使 用 它 


们 ; 在 于 
要 的 。 


F 始 构建 StockDog 之 前 ， 首 先 对 将 要 学 习 的 内 容 进行 一 次 高 级 别 的 概述 是 非常 重 
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StockDog Watchlists ~ 


四 Watchlists 泻 Hottech stocks [+| 


Technology Symbol SharesOwned LastPrice PriceChange($|%) Market Value 。 Day Change 
Pharmaceutical MSFT 100 | +0.1168 $4,410.68 $11.68 


TWTR 100 $49.59 +1.04 $4,959.00 $104.00 


Financial 


+0.045 $4,447.50 $4.50 
-1.2601 $12,752.99 ($126.01) 
$48,253.25 $420.25 


+4786 $27,378.60 $478.60 


到 
x 
日 
名 
六 
二 


+0.245 $38,561.50 $24.50 


to EE 


Click on Shares Owned cell to edit 


Built with Y by Dlego and Val 


图 1-2 


1.2 学 习 内 容 


本 章 所 包含 的 分 步 指南 的 内 容 将 超出 AngularJS 基本 用 法 的 范围 。 通 过 使 用 该 框架 的 
主要 构建 块 实现 实际 的 、 真 实 世界 中 的 样 例 ， 将 学 到 AngularJS 所 提供 的 大 部 分 组 件 ， 接 
着 在 随后 的 章节 中 将 进行 详细 讲解 。 记 住 这 一 点 非常 重要 , 因为 StockDog 所 需要 的 某 些 特 
性 将 使 用 框架 的 高 级 概念 。 这 些 情况 下 ， 关 于 AngularJS 底层 机 制 如 何 工 作 的 特定 细节 将 
被 忽略 ， 但 本 书 将 从 高 级 别 的 层面 进行 解释 ， 帮 助 你 了 解 在 实现 当前 特性 的 上 下 文中 如 何 
使 用 这 些 组件 。 在 本 章 的 末尾 处 ， 将 会 学 到 如 何 完 成 以 下 事情 : 
构建 多 视图 、 单 页 面 应 用 
创建 指令 、 控 制 器 和 服务 
配置 routeProvider 用 于 处 理 视 图 之 间 的 路 由 
安装 额外 的 前 端 模块 
处 理 动态 表单 验证 
促进 AnuglarJS 组 件 之 间 的 通信 
在 服务 中 使 用 HIMLS LocalStorage 
使 用 $http 与 外 部 服务 器 进行 通信 
使 用 $animate 服务 实现 层 登 样式 表 (CSS) 动 画 

e 为 生产 环境 构建 应 用 资产 

e 将 构建 的 应 用 部 署 到 GitHub 页 面 

现在 我 们 已 经 讨论 了 StockDog 的 范围 和 高 级 概述 ,那么 你 现在 应 该 已 经 拥有 了 足够 的 
背景 知识 和 上 下 文 ， 可 以 开始 构建 应 用 了 。 对 于 希望 立即 看 到 StockDog 工作 样 例 的 读者 ， 
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可 以 在 http://stockdog.io 网 址 找到 完整 的 应 用 。 


1.3 步骤 1: 使 用 Yeoman 搭建 项 目 


从 头 开始 创建 一 个 全 新 的 Web 应 用 可 能 非常 困难 , 因为 这 通常 会 涉及 手动 下 载 并 配置 
几 个 库 和 框架 、 创 建 一 个 智能 的 目录 结构 并 手动 创建 初始 的 应 用 结构 。 不 过 ， 随 着 前 端 工 
具 的 重大 发 展 ， 这 个 过 程 已 经 不 需要 这 么 复杂 了 。 通 过 这 个 指南 ， 将 使 用 几 个 工具 自动 完 
成 开发 工作 流 的 几 个 不 同方 面 ， 但 是 关于 这 些 工具 如 何 工作 的 详细 讲解 将 被 保留 到 第 2 章 
进行 讨论 。 在 开始 搭建 项 目 之 前 ， 需 要 验证 自己 是 否 已 经 安装 了 下 面 的 软件 ， 作 为 开发 环 
境 的 一 部 分 : 

® Node.js——http://nodejs.org/ 

® Git——http://git-scm.com/downloads 

本 章 使 用 的 所 有 工具 都 是 使 用 Nodejs 构建 的 ， 而 且 可 以 使 用 命令 行 工 具 npm( 被 包含 
在 Nodejs 安装 包 中 ) 从 Node Packaged Modules(NPM) 注 册 中 进行 安装 。Git 也 是 所 需 的 工 
有 具 之 一 ， 因 此 在 继续 执行 之 前 ， 请 保证 你 已 在 系统 上 正确 配置 了 它 和 Nodejs。 


1.3.1 安装 Yeoman 


Yeoman 是 一 个 含有 插件 ( 称 为 生成 器 ) 生 态 系统 的 开源 工具 , 它 可 以 使 用 最 佳 实践 创建 
新 的 项 目 。 它 由 一 个 健壮 的 、 比 较 教 条 的 客户 端 栈 组 成 ， 可 以 促进 工作 流 变 得 高 效 ， 通 过 
与 两 个 额外 的 工具 结合 使 用 ， 可 以 帮助 你 成 为 一 个 高 效 的 开发 者 。 下 面 是 Yeoman 用 于 完 
成 这 个 任务 的 工具 : 

eGrunt 一 一 一 个 JavaScript 任务 运行 器 ， 它 可 以 帮助 自动 完成 构建 和 测试 应 用 的 重复 

性 任务 。 

e Bower 一 一 一 个 依赖 管理 工具 ， 这 样 你 就 不 必 手 动 下 载 和 管理 前 端 脚本 。 

可 在 第 2 章 中 找到 有 关 Yeoman 的 深度 讨论 、 推 荐 的 工作 流 以 及 相关 的 工具 。 现 在 ， 
所 有 需要 做 的 就 是 安装 Grunt、 Bower 和 AngularJS 生成 器 , 可 在 命令 行 中 运行 下 面 的 命令 : 

npm install -g grunt-cli 


npm install -g bower 
npm install -g generator-angular@0.9.8 


注意 : 

在 调用 npm install 时 指定 -g 标 志 将 保证 目标 包 在 机 器 中 全 局 可 用 。 安 装 generator- 
angular( 由 Yeoman 团 队 维 护 的 正式 AngularJS 生 成 器 ) 时 ， 请 将 版 本 指定 为 0.9.8。 不 论 当 前 的 
版 本 是 多 少 ， 指 定 固定 的 版 本 可 以 使 你 轻松 地 与 该 指南 的 剩余 部 分 保持 一 致 。 而 对 于 接 下 
来 的 所 有 项 目 ， 则 极力 推荐 你 更 新 至 最 新 版 本 。 在 完成 本 章 的 学 习 之 后 , 运行 npm install -g 
generator-angular 命 令 即 可 实现 。 
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1.3.2 ”搭建 项 目 

在 机 器 中 安装 了 所 有 必需 的 工具 后 ， 就 可 以 开始 搭建 项 目 了 。 幸 好 ，Yeoman 使 整个 过 
程 变 得 快捷 轻松 。 请 继续 向 下 并 创建 一 个 新 目录 StockDog， 然 后 使 用 所 选 的 命令 行 应 用 浏 
览 至 该 目录 。 在 新 创建 的 项 目 目录 中 运行 以 下 命令 : 


Yo angular StockDog 


0 Yeoman 生 成 器 的 第 一 步 ， 它 将 询问 一 些 关于 希望 如 何 创建 应 用 的 
个 提示 将 询问 是 否 希 望 使 Sas 用 Coed): 尽管 对 于 管理 样式 表 来 说 这 些 
都 是 非常 有 用 的 工具 , 但 是 它们 的 使 用 超出 了 本 书 的 讨论 范围 ,所 以 请 输入 n, 然后 按 下 回 
车 键 做 出 否定 的 回答 : 


[?] Would you like to use Sass (with Compass)? (Y/n) 


下 一 个 提示 将 询问 是 否 希望 包含 Bootstrap( 一 个 由 Twitter 创 建 的 前 端 框 架 )。 SotckDog 
大 量 使 用 Bootstrap 提 供 的 超 文本 标记 语言 GTML) 和 CSS 资 产 ， 所 以 需要 包含 它 作为 应 用 
-部 分 。 ee 由 大 写字 母 Y 表 示 , 所 以 输入 回 车 键 即 可 (Bootstrap 
将 被 包含 在 系统 中 ): 


[?] Would you like to include Bootstrap? (Y/n) 


最 后 一 个 提示 将 询问 希望 在 应 用 中 包含 哪个 可 选 的 AngularJS 模 块 。 尽管 在 这 个 特定 的 
项 目 中 ， 你 不 ise 时 图 1-3 列 出 的 所 有 模块 ， 但 是 我 们 推荐 选择 [ 包含 所 有 模块 
可 通过 访问 https:/docs.angularjs.org/api 了 解 更 多 信息 ， 向 下 滚动 时 可 以 看 到 每 个 模块 都 提 
供 了 什么 服务 和 指令 。 简 单 地 输入 回 车 键 将 包含 所 有 默认 的 模块 ，Yeoman 也 将 开始 搭建 项 
目 ， 如 图 1-3 所 示 。 


图 1-3 
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在 最 后 一 个 提示 中 输入 回 车 键 之 后 ， 等 待 Yeoman 完成 所 有 相关 的 搭建 任务 ， 这 将 需 
要 一 些 时 间 , 然后 StockDog 的 基础 工作 就 完成 了 。 接 下 来 将 详细 了 解 目录 结 构 的 重要 部 分 ， 
以 及 可 以 使 用 Yeoman 配置 的 工作 流 任务 (作为 拱 建 过 程 的 一 部 分 )。 


1.3.3 浏览 应 用 


现在 项 目 已 经 搭建 完成 了 , 请 花 几 分 钟 时 间 浏 览 一 下 AngularJS Yeoman 生成 器 为 你 提 
供 的 内 容 。 该 项 目的 目录 结构 将 如 下 所 示 : 


StockDog/ 
Cr— .bowerrc 
上 一 一 -editorconfig 
上 一 .gitattributes 
上 一 一 .jshintrc 
上 一 一 .travis.yml 
上 一 一 bower .json 
EC package.json 
上 一 一 Gruntfile.js 
上 一 app/ 
上 一 404.html 
上 一 favicon.ico 
上 一 一 robots.txt 
上 一 index.html 
上 -一 images/ 
上 Eo styles/ 
| -一 一 main.css 


| 
| 
| 
| 
| 
| 
| 
| 忆 — views/ 
| 
| 
| 
| 
| 
| 
| 


| [一 一 main.html 

| L 一 一 about .html 

上 -一 scripts/ 

| | 一 一 app.js 

| -一 一 controllers/ 

人 小 二 一 

| | 一 一 about.js 
EQ node modules/ 
上 一 bower_components/ 
Eo test/ 


乍 一 看 ， 该 目录 结构 似乎 过 于 复杂 ， 但 许多 由 Yeoman 生成 的 文件 都 是 用 于 帮助 增强 
最 佳 实践 的 ， 而 且 在 本 章 的 剩余 内 容 中 完全 可 以 被 忽略 。 需 要 你 关注 的 文件 和 目录 都 已 经 
通过 加 粗 的 方式 进行 了 强调 ， 所 以 到 目前 为 止 你 只 需 关 注 这 些 文件 和 目录 。 

注意 : 

根据 查看 项 目 目录 结构 的 方式 ， 你 的 操作 系统 可 能 会 自动 隐藏 所 有 文件 名 以 点 开头 的 
文件 。 这 些 文件 被 用 于 配置 各 种 工具 ， 例 如 Git、Bower 和 JSHint。 


你 可 能 已 经 猜 到 了 ， 程 序 主体 将 被 包含 在 app/ 目 录 中 。 在 这 里 可 以 找到 主 文件 
index.html( 它 将 被 用 作 整 个 应 用 的 入 口 点 )， 以 及 styles/、views/ 和 scripts/ 目 录 ( 它 们 分 别 包 
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含 了 CSS、HTML 和 JavaScript 文件 )。Gruntfilejs 也 特别 有 趣 ， 因 为 它 配置 了 几 个 Grunt 


任务 , 用 于 在 StockDog 开发 过 程 中 支持 工作 流 。 继 续 并 启动 所 选择 的 终端 应 用 , 运行 下 面 


的 命令 : 


grunt serve 


这 将 启动 一 个 由 Yeoman 在 搭建 过 程 中 配置 的 本 地 开发 服务 器 ， 并 在 默认 浏览 器 的 一 个 


新 的 选项 卡 中 打开 当前 的 主干 应 用 程序 .此 时 , 你 的 浏览 器 应 该 指向 http:/localhost:9000/ 井 ， 
并 显示 出 如 图 1-4 所 示 的 应 用 页 面 。 


ites. 


stockDog About 。 Contact 


IHTMLS Boilerplate 
ITML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or 


Angular 


ularJS is a toolset for building the framework most suited to your application development. 


'Allo, 'Allo! 


YEOMAN 
Always a pleasure scaffolding your apps. 


Splendidiv 


图 1-4 


巷 喜 , 你 已 经 成 功 完 成 了 项 目的 搭建 , 基本 上 可 以 开始 构建 StockDog 应 用 的 第 一 个 组 
件 了 。 在 整个 开发 过 程 中 ， 务 必 打 开 运 行 grunt serve 命令 的 终端 会 话 ， 因 为 它 将 负责 提供 
浏览 器 中 使 用 的 所 有 应 用 资产 。 在 继续 学 习 下 一 节 之 前 ， 请 花 一 分 钟 时 间 修 改 
app/views/main html 文件 ， 移 除 所 有 的 内 容 。 保 存 修改 之 后 ， 你 应 该 注意 到 浏览 器 选项 卡 
将 立即 刷新 显示 出 这 个 改动 ， 此 时 显示 出 的 应 该 是 一 个 几乎 空白 的 视图 。Yeoman 在 配置 


Gruntfilejs 时 添 力 


对 自 


E 务 ， 用 于 监视 应 用 文件 的 改动 ， 并 相应 地 刷新 浏览 器 ， 通 过 这 种 方 


式 实现 了 自动 刷新 。 当 开始 构建 SotckDog 应 用 的 组 件 时 ,这 个 功能 将 被 证 明 是 非常 有 用 的 。 


1.3.4 ”清理 


到 目前 为 止 ， 本章 已 经 讲解 了 如 何 使 用 Yeoman 从 头 搭建 一 个 新 项 目 、 浏 览 所 生成 的 
项 目 结构 并 简单 了 解 了 它 提供 的 工作 流 如 何 帮 助 开发 者 高 效 地 完成 开发 过 程 。 在 开始 学 习 
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指南 的 下 一 步骤 之 前 需要 做 的 最 后 一 件 事 情 是 :删除 一 些 StockDog 不 需要 使 用 的 自动 生成 
文件 ， 并 清理 所 有 相关 的 引用 。 请 定位 并 从 项 目 中 删除 下 面 的 文件 : 


app/views/main.html 
app/views/about.html 
app/scripts/controllers/main.js 
app/scripts/controllers/about.js 


接 下 来 删除 Yeoman 创建 的 路 由 ， 即 打开 app/scripts/appjjs 文件 并 删除 SrouteProvider 
的 两 个 .when() 配 置 。 可 通过 移 除 下 面 的 代码 来 实现 : 
-when('/', { 
templateUrl: 'views/main.html', 


controller: 'MainCtr1l'" 

}) 

-when('/about', { 
templateUrl: 'views/about.html', 
controller: 'AboutcCtrl' 

}) 


最 后 ， 移 除 对 之 前 被 删除 的 mainjs 和 aboutjs 控制 器 脚本 的 引用 ， 方 法 是 从 
app/index.html 文件 中 删除 以 下 代码 行 : 

<script src="scripts/controllers/main.js"></script> 

<script src="scripts/controllers/about.js"></script> 

修改 完 所 生成 的 主干 应 用 后 , 现在 就 可 以 开始 构建 StockDog 的 监视 列表 组 件 了 。 为 了 
访问 指南 中 该 步骤 的 完整 代码 ， 请 参考 本 章 附带 代码 中 的 step-1 目录 ， 或 者 签 出 GitHub 
仓库 中 对 应 的 标记 。 


1.4 步骤 2: 创建 监视 列表 


本 节 将 实现 股票 监视 列表 , 这 是 StockDog 应 用 的 第 一 个 主要 组 件 。 如 之 前 提 到 的 , 监 
视 列 表 就 是 目标 股票 的 任意 组 合 ， 它 们 将 被 追踪 并 用 于 分 析 目 的 。 应 用 的 用 户 将 通过 填写 
一 个 小 表单 在 SotckDog 中 创建 一 个 新 的 监视 列表 , 该 表单 被 展示 在 模 态 框 中 , 它 会 提示 用 
户 输入 姓名 和 简单 的 描述 信息 ， 用 于 识别 监视 列表 。 使 用 应 用 注册 的 所 有 监视 列表 将 采用 
HIML5 LocalStorage 把 自己 的 数据 保存 在 浏览 器 客户 端 。 最 后 ， 监 视 列表 的 名 字 将 显示 在 
用 户 界面 的 一 个 小 面板 中 。 在 对 组 件 目标 功能 有 了 高 级 别 的 了 解 之 后 ， 现 在 将 学 习 如 何 使 
用 AngularJS 实现 监视 列表 。 


1.4.1 应 用 模块 


所 有 AngularJS 应 用 的 主 入 口 是 项 级 app 模块 。 那 么 到 底 什 么 是 模块 呢 ? 如 官方 文档 
中 所 提 到 的 ， 可 将 模块 看 成 应 用 的 不 同 部 分 的 容器 。 尽 管 大 多 数 应 用 都 有 一 个 主 方法 ， 用 
于 实例 化 和 连接 不 同 的 组 件 ， 但 是 AngularJS 模块 显 式 地 指定 了 如 何 启 动 组 件 。 这 种 方式 
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的 一 些 优点 是 : 模块 可 按 任意 顺序 以 异步 方式 加 载 ， 代 码 可 读 性 和 可 重用 性 也 得 到 增强 。 
在 app/scripts/appjjs 文件 中 ,调用 .module(O) 函 数 定义 主 应 用 模块 ， 该 函数 将 接受 一 个 名 字 和 
一 个 依赖 数组 。 注 意 模块 的 名 称 ， 此 时 使 用 的 应 该 是 stockDogApp， 因 为 稍 后 将 引用 它 。 
对 于 过 去 已 经 用 过 RequireJS 的 读者 来 说 ， 这 种 声明 模块 依赖 的 方法 应 该 看 起 来 很 熟悉 。 


1. 安装 模块 依赖 


目前 ， 应 用 依赖 的 模块 只 应 该 包含 ngAnimate、ngCookies、ngResource、ngRoute、 
ngSanitize 和 ngTouch, 所 有 这 些 依赖 都 是 Yeoman 根据 初始 的 搭建 过 程 中 第 三 个 提示 的 响 
应 所 安装 的 。 本 节 稍 后 将 使 用 AngularStrap 公开 的 Smodal 服务 , 这 是 一 个 为 Bootstrap 框架 
所 提供 的 各 种 组 件 提供 原生 AngularJS 绑 定 的 第 三 方 模块 。 通 过 访问 AngularStrap 的 文档 
(http://mgcrea.github.io/angular-strap/), 可 以 了 解 更 多 关于 AngularStrap 的 相关 知识 。 因 为 由 
Yeoman 创建 的 工作 流 将 使 用 Bower 管理 前 端 脚本 ， 所 以 安装 AngularStrap 就 是 从 命令 行 
中 执行 下 面 的 命令 这 样 简单 : 


bower install angular-strap#v2.1.0 -save 


这 将 下 载 AngularStrap 库 ， 并 将 它 保存 为 bowerjson 文件 中 的 一 个 依赖 。 如 果 保 持 之 
前 使 用 grunt serve 启动 的 应 用 服务 器 一 直 运 行 ， 那 么 Grunt 已 经 看 到 了 bowerjson 的 改动 
并 将 自动 更 新 index.html 文件 ， 用 于 引用 AnuglarStrap 提供 的 CSS 和 JavaScript 文件 。 对 
于 简单 的 单行 命令 来 说 这 还 算 不 错 ! 现在 所 有 剩 下 的 工作 就 是 将 AngularStrap 模块 (被 命名 
为 mgcrea.ngStrap) 注 册 为 stockDogApp 模块 的 依赖 : 将 它 添加 到 依赖 数组 中 ， 如 代码 清单 
1-1 所 示 。 


代码 清单 1-1: app/scripts/app.js 


angular 

.module('stockDogApp', [ 
'ngAnimate', 
'ngCookies', 
'ngResource', 
"ngRoute ' 
"ngSanitize'y 
"ngTouch' 
"mgcrea.ngStrap'" 

]) 7 


注意 : 

另 一 个 常用 的 AngularJS 库 是 UI Bootstrap， 它 将 为 各 种 Bootstrap 组 件 公开 指 令 ， 该 
项 目 是 由 AngularUI 组 织 维护 的 。 为 学 习 更 多 UI Bootstrap 的 相关 知识 ， 请 访问 文档 网 站 
http:/angular-ui.github.io/bootstrap/。 

2. 启动 应 用 


现在 你 已 经 看 到 了 如 何 定义 应 用 模块 和 注册 表 依 赖 项 , 启动 StockDog 的 下 一 步 就 是 在 
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HTML 中 引用 stockDogApp 模块 。 非 常 方便 的 是 ，Yeoman 可 自动 完成 该 任务 。 请 看 
app/index.html 文件 的 内 容 ; 在 第 19 行 你 应 该 看 到 下 面 的 代码 : 


<body ng-app="stockDogApp"> 


特性 ng-app 已 经 被 附加 到 了 页 面 的 <body> 标 记 中 ， 它 是 一 个 AngularJS 指令 ， 用 于 将 
HTML 元 素 标志 为 应 用 的 根 。 稍 后 将 定义 指令 ， 但 是 现在 为 了 启动 AngularJS 应 用 模块 ， 
就 必须 在 应 用 的 HIML 中 添加 ng-app 特性 。 另 外 值得 一 提 的 是 ， 因 为 ng-app 是 一 个 元 素 
特性 , 所 以 可 以 自由 地 移动 它 , 并 决定 使 用 整个 HTML 页 面 还 是 一 部 分 作为 Angular 应 用 。 
使 用 stockDogApp 模块 的 方式 启动 应 用 ， 现 在 将 公开 给 AngularJS 服务 ， 这 是 AngularJS 
框架 的 另 一 个 关键 组 件 。 


1.4.2 ”Watchlist 服务 


如 AnguarJS 文档 所 定义 的 ,服务 是 使 用 依赖 注入 连接 在 一 起 的 可 蔡 换 对 象 。 服 务 提供 
了 一 种 在 应 用 中 组 织 和 共享 封装 代码 的 方式 。 值得 一 提 的 是 ， AngularJS 服务 是 延迟 实例 化 
的 单 实例 服务 ， 这 意味 着 只 有 当 应 用 组 件 依赖 于 它们 时 才 会 被 实例 化 ， 每 个 依赖 于 它们 的 
组 件 将 收 到 一 个 由 服务 工厂 生成 的 单 实例 引用 。 出 于 为 StockDog 构建 监视 列表 功能 的 目 
的 ,将 创建 一 个 自 定义 服务 , 用 于 负责 读 取 和 写 入 HTML5 LocalStorage 中 的 监视 列表 模型 。 
首先 运行 下 面 的 命令 行 : 

yo angular:service Watchlist-Service 


它 将 使 用 AngularJS Yeoman 生成 器 的 打包 子 生 成 器 ， 在 新 创建 的 watchlist-service.js 
文件 中 搭建 一 个 主干 服务 ， 该 文件 被 添加 到 了 app/scripts/services 目录 中 。 另 外 ，Yeoman 
添加 一 个 对 这 个 新 创建 脚本 的 引用 ， 在 app/index.html 文件 的 底部 可 以 看 到 下 面 这 行 代码 : 


<script src="scripts/services/watchlist-service.js"></script> 

现在 你 已 经 快速 地 构造 了 新 服务 的 入 口 点 ， 接 下 来 需要 安装 的 是 Lodash， 这 是 一 个 为 
JavaScript 提供 了 函数 式 编程 帮助 的 工具 库 , 本章 剩余 的 内 容 中 将 会 一 直 使 用 它 。 通 过 运行 
下 面 的 命令 行 ， 使 用 Bower 安装 Lodash: 


bower install lodash --save 


Lodash 开始 时 是 Underscorejs 项 目的 一 个 分 支 , 但 它 已 经 演化 成 了 一 个 高 度 可 配置 的 
高 性 能 库 ， 它 将 加 载 大 量 额外 的 辅助 方法 。WatchlistService 实现 使 用 了 一 些 Lodash 方法 ， 
如 代码 清单 1-2 所 示 。 

代码 清单 1-2: app/scripts/services/watchlist-service.js 


"use strict'; 


angular.module ('stockDogApp') 
.Service('WatchlistService', function WatchlistService() { 


// [1] 辅助 方法 : 从 localstorage 中 加 载 监视 列表 
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Var loadModel = function () { 
Var model = { 
watchlists: localStorage['StockDog.watchlists'] ? 
JSON.parse (localStorage ['StockDog.watchlists']) : 
nextId: localstorage['StockDog.nextId'] ? 
parseInt (localStorage['StockDog.next1Id']) : 0 
}; 
return model; 
}; 


// [2] 辅助 方法 : 将 监视 列表 保存 到 1ocalstorage 中 
var saveModel = function () { 
localStorage['StockDog.watchlists'] = 
JSON.stringify (Model .watchlists); 
localStorage ['StockDog.nextId'] = Model.nextId; 


] 7 


// [3] 辅助 方法 : 使 用 lodash 找到 指定 ID 的 监视 列表 
var findById = function (listId) { 
return _.find(Model.watchlists, function (watchlist) 
return watchlist.id === parseInt (listId); 
1); 
过 


// [4] 返 回 所 有 监视 列表 或 者 按 指 定 的 ID 进行 查找 
this.query = function (listId) { 
if (listId) { 
return findById(listId); 
} else { 
return Model.watchlists; 
} 
] 7 


// [5] 在 监视 列表 模型 中 保存 一 个 新 的 监视 列表 

this.save = function (watchlist) { 
watchlist.id = Model.nextId++; 
Model .watchlists.push (watchlist); 
saveModel (); 

3 


// [6] 从 监视 列表 模型 中 移 除 指定 的 监视 列表 
this.remove = function (watchlist) { 
_-remove (Model .watchlists, function (list) { 
return list.id === watchlist.id; 
Fi 
saveModel (); 
1; 


// [7] 为 这 个 单 例 服务 初始 化 模型 


[]， 


{ 


外 
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Var Model = loadModel (); 
]) 


首先 你 应 该 注意 到 的 是 : 在 stockDogApp 模块 上 调用 的 .service() 方 法 ， 它 将 使 用 顶级 
AnuglarJS 应 用 注册 该 服务 。 通 过 将 WatchlistService 注入 到 目标 组 件 实现 函数 中 ， 可 以 允 
许 在 其 他 位 置 引 用 该 服务 。loadModel0 辅 助 方法 [] 要 求 浏览 器 的 LocalStorage 中 存储 的 数 
据 使 用 以 StockDog 为 命名 空间 的 键 , 从 而 避免 潜在 的 冲突 .从 localStorage 中 获取 watchlists 
值 是 一 个 数组 ， 而 nextId 只 是 一 个 用 于 区 分 每 个 watchlist 的 整数 。 三 元 操作 符 保 证 了 这 两 
个 变量 的 初始 值 都 被 正确 地 进行 设置 ， 并 正确 地 进行 解析 。saveModel() 辅 助 方法 [2] 只 需 
要 在 把 watchlist 数组 的 内 容 持 久 化 到 localStorage 之 前 , 将 它 字 符 串 化 。 另 一 个 内 部 的 畏 
助 函数 findById() [3] 将 使 用 Lodash， 根 据 之 前 提 到 的 数组 中 的 指定 ID 查找 监视 列表 。 

抛 开 这 些 内 部 辅助 方法 之 后 ， 你 现在 应 该 注意 到 : 剩余 的 函数 都 将 使 用 关键 字 this 直 
接 附加 到 服务 实例 中 。 尽 管 使 用 this 可 能 容易 出 现 错误 而 且 并 不 总 是 最 佳 方式 ， 但 在 目前 
这 种 情况 下 是 没有 问题 的 ， 因 为 Angular 将 通过 在 提供 给 .service0 的 函数 上 调用 new 来 实 
例 化 一 个 单 例 。 服 务 函 数 .query0O[4] 将 返回 模型 中 所 有 的 监视 列表 (除非 指定 了 listtd)。 函 
数 .save[5] 将 增加 nextId， 并 在 委托 给 saveModel 辅助 函数 之 前 ， 将 一 个 新 的 监视 列表 推 入 
到 watchlist 数组 中 。 最 后 ，.remove(O) 函 数 将 使 用 一 个 Lodash 方法 完成 完全 相反 的 操作 [6]。 
为 了 完成 该 服务 ， 使 用 loadModel() 辅 助 方法 初始 化 一 个 本 地 Model 变量 。 此 时 ， 就 可 以 从 
AngularJS 指令 中 使 用 WatchlistService 服务 了 ， 下 一 节 将 开始 创建 指令 。 


注意 : 

如 果 到 此 时 为 止 ， 你 的 本 地 开发 服务 器 一 直 处 于 运行 状态 ， 那 么 Grunt 应 该 会 报告 一 
个 警告 “'is not defined”。 这 是 因为 Lodash 通过 下 划 线 将 自己 附加 到 了 全 局 作用 域 中 , 但 
是 负责 管理 JavaScript 文件 (检查 错误 ) 的 进程 并 未 注意 到 这 个 情况 。 在 .jjshintrc 文件 底部 的 
globals 对 象 中 添加 " ": false 即 可 消除 这 个 错误 。 


1.4.3 ”监视 列表 面板 指令 


到 现在 为 止 ， 你 可 能 已 经 听 说 过 AngularJS 指令 以 及 它 是 多 么 全 能 (如 果 使 用 正确 的 
话 )。 那 么 到 底 什么 是 指令 呢 ?” 如 官方 文档 所 定义 的 ， 指 令 是 文档 对 象 模 型 (DOM) 元 素 ( 例 
如 特性 、 元 素 名 称 、 注 释 或 CSS 类 ) 上 的 标记 ， 它 们 将 告诉 AngularJS 的 HTML 编译 器 
($compile) 把 指定 的 行为 附加 到 DOM 元 素 及 其 子 元 素 , 甚至 是 转换 DOM 元 素 及 其 子 元 素 。 
第 5 章 “ 指 令 ” 将 详细 讲解 指令 的 工作 方式 。 现 在 ， 所 有 需要 知道 的 就 是 不 仅 可 以 创建 自 
己 的 自 定义 指令 ，AngularJS 还 提供 了 一 组 现成 的 内 置 指令 ， 例 如 ng-app、ng-view 和 
ng-repeat， 所 有 都 是 以 ng 为 前 缀 的 。 而 对 于 StockDog 应 用 ， 所 有 自 定义 指令 都 是 以 stk 
为 前 缀 的 ， 因 此 可 以 轻松 识别 出 它们 。 可 以 使 用 Yeoman 的 指令 子 生成 器 搭建 和 连接 一 个 
主干 指令 ， 请 运行 下 面 的 命令 行 : 


yo angular:directive stk-Watchlist-Panel 


该 命令 将 在 app/scripts/directives 目 录 中 创建 stk-watchlist-paneljs 文 件 ， 并 自动 在 
index.html 文 件 中 添加 新 创建 脚本 的 引用 。 该 指令 的 实现 如 代码 清单 1-3 所 示 。 
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代码 清单 1-3: app/scripts/directives/stk-watchlist-panel.js 
"use strict'; 


angular.module ('StockDogApP ') 
// [1] 注 册 指 令 和 注入 依赖 
.directive('stkWatchlistPanel', function ($location, $modal, 
WatchlistService) { 
return { 
templateUrl: 'views/templates/watchlist-panel.html', 
rostricts EE", 
scope: {}, 
link: function ($scope) { 
// [2] 初 始 化 变量 
$scope.watchlist 
var addListModal 
scope: $scope, 
template: 'views/templates/addlist-modal.html', 
show: false 
1); 


{}; 
$modal ({ 


// [3] 将 服务 中 的 模型 绑 定 到 该 作用 域 


$scope.watchlists = WatchlistService.query() 7 


// [4] 显 示 addlist modal 

$scope.showModal = function () { 
addListModal.$promise.then (addListModal .show); 

}; 


// [5] 根据 模 态 框 中 的 字段 创建 一 个 新 的 列表 

$scope.createList = function () { 
WatchlistService.save($scope.watchlist); 
addListModal .hide(); 
$scope.watchlist = {}; 

}; 


// [6] 删 除 目标 列表 并 重 定向 至 主页 
$scope.deleteList = function (list) { 
WatchlistService.remove (list); 
$location.path('/'); 
}; 
} 
}; 
]) 


方法 .directive() 将 负责 使 用 stockDogApp 模块 注册 stkWatchlistPanel 指令 [1]。 该 样 例 演 
示 了 Angular 依赖 注入 机 制 的 使 用 ， 这 如 同 指 定 指令 实现 函数 的 参数 一 样 简单 。 注 意 : 之 
前 创建 的 WatchlistService 以 及 $location 和 $modal 服务 已 经 作为 依赖 注入 了 ,因为 在 实现 指 
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令 时 需要 使 用 它们 。 实 现 函 数 自身 将 返回 一 个 包含 了 配置 选项 和 link() 函 数 的 对 象 。 在 link 
函数 中 初始 化 指令 的 作用 域 变量 [2], 其 中 包括 使 用 AngularStrap 的 Smodal 服务 创建 modal。 
调用 WatchlistService 的 .query0 方 法 ， 将 服务 的 模型 绑 定 到 指令 的 作用 域 [3]。 然 后 将 处 理 
器 函数 附加 到 $scope， 并 提供 显示 模 态 框 的 功能 [4]、 根 据 模 态 的 字段 创建 一 个 新 的 监视 列 
表 [5] 并 删除 一 个 监视 列表 [6]。 这 些 处 理 器 函数 的 实现 都 非常 直观 并 且 使 用 了 被 注入 的 服 
务 。 

stkWatchlistPanel 指令 的 配置 选项 将 通过 把 它 限制 为 用 作 元 素 (通过 restrict: EE) 以 及 隔 
离 它 的 作用 域 (从 而 使 所 有 附加 到 $scope 变量 的 值 只 在 该 指令 的 上 下 文中 可 用 ) 的 方式 来 修 
改 它 的 行为 。 选 项 templateUrl 可 以 引用 Angular 加 载 的 一 个 文件 并 泻 染 到 DOM 中 。 对 于 
该 应 用 来 说 ， 模 板 将 被 存储 在 app/views/templates 目录 中 ， 所 以 请 继续 并 创建 该 目录 。 该 
指令 所 需 的 watchlist-panel.html 模板 如 代码 清单 1-4 所 示 。 


代码 清单 1-4: app/views/templates/watchlist-panel.html 


<div class="panel panel-info"> 
<div class="panel-heading"> 
<span class="glyphicon glyphicon-eye-open"></span> 
Watchlists 
<!--[1] 在 单 击 时 调用 showModal () 处 理 器 --> 
<button 七 Ype="button" 
class="btn btn-success btn-xs pull-right" 
ng-click="showModal () "> 
<span class="glyphicon glyphicon-plus"></span> 
</button> 
</div> 
<div class="panel-body"> 
<!-- [2] 如 果 没 有 监视 列表 存在 ， 就 显示 帮助 文本 --> 
<div ng-if="!watchlists.length" class="text-center"> 
Use <span class="glyphicon glyphicon-plus"></span> to create a list 
</div> 
<div class="1ist-group"> 
<!-- [3] 重 复 监 视 列表 中 的 每 个 列表 ， 并 创建 链接 --> 
<a class="1ist-group-itemn 
ng-repeat="1list in watchlists track by $index"> 
{{l1ist.name}} 
<!-- [4] 调 用 deleteList () 处 理 器 删除 该 列表 --> 
<button type="button" class="close" 
ng-click="deleteList (list)"> &times; 
</button> 
</a> 
</div> 
</div> 
</div> 
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注意 : 

一 旦 保存 了 该 HTML 文件 , 你 可 能 就 会 注意 到 浏览 器 并 未 自动 刷新 显示 出 改动 。 这 是 
因为 当前 的 Grunt 工作 流 只 监视 顶级 app/views 目录 中 HIML 文件 的 改动 . 为 了 强迫 Grunt 
递归 地 监视 app/views 目录 中 所 有 HTML 文件 的 改动 ， 可 将 Gruntfilejs 文件 中 第 59 行 的 
globbing pattern 表达 式 改 为 下 面 的 内 容 : 


'<$= yeoman.app %>/**/*.html', 


watchlist-panel.html 模板 将 大 量 使 用 Bootstrap 框架 提供 的 类 和 图 标 ， 用 于 创建 一 个 简 
单 的、 优美 的 界面 。 在 加 号 按钮 被 单 击 时 ， 使 用 内 置 的 AngularJS ng-click 指令 调用 
showModal() 处 理 器 [1]。 指 令 ng-if 将 根据 表达 式 的 计算 结果 决定 插入 或 删除 一 个 DOM 元 
素 ， 当 watchlists 数组 为 空 时 ， 它 将 显示 出 指令 文本 [2]。 为 了 遍历 watchlists 数组 ， 可 以 使 
用 ng-repeat 和 track by $index 语法 , 这 样 如 果 数 组 中 包含 了 一 致 的 对 象 , Angular 就 不 会 抱 
怨 [3]。 值 得 一 提 的 是 ， 因 为 ng-repeat 被 附加 到 了 一 个 HIML <a> 标 记 上 ， 所 以 Angular 将 
为 数组 中 的 每 个 对 象 都 创建 一 个 唯一 的 链接 。 用 于 引用 当前 列表 名 称 的 双重 花 括 号 { 全 } 被 
称 为 绑 定 ， 而 listname 被 称 为 表达 式 。 该 绑 定 将 告诉 Angular 它 应 该 计算 表达 式 并 将 结果 
插入 到 DOM 中 来 替换 绑 定 。 最 后 ，deleteListO 处 理 器 将 通过 另 一 个 按钮 连接 到 界面 ， 再 一 
次 使 用 ng-click 指令 进行 连接 [4] 。 


1. 基本 的 表单 验证 


完成 stkWatchlistPanel 指令 实现 的 最 后 一 步 是 构建 允许 用 户 创建 新 的 监视 列表 的 表单 。 
如 果 还 记得 的 话 ， 在 指令 的 link() 函 数 内 部 ， 使 用 AngularStrap 模块 公开 的 Smodal 服务 初 
始 化 了 addListModal 变量 。 服 务 Smodal 接受 一 个 template 选项 ， 该 选项 将 在 一 个 Boostrap 
模 态 框 中 泻 染 目 标 HTML。 在 app/views/templates/ 目 录 中 创建 一 个 名 为 addlist-modal.html 
的 新 文件 。 该 模板 的 实现 如 代码 清单 1-5 所 示 。 


代码 清单 1-5: app/views/templates/addlist-modal.html 


<div class="modal" tabindex="-]1" role="dialog"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<!-- [1] 在 单 击 时 调用 Smodal .Shide () --> 
<button type="button" class="close" 
ng-click="$hide()"> gtimes; 
</button> 
<h4 class="modal-title">Create New Watchlist</h4> 
</div> 
<!-- [2] 命 名 该 表单 用 于 验证 过 程 --> 
<form role="form" id="add-list" name="listForm"> 
<div class="modal-body"> 
<div class="form-group"> 
<label for="list-name">Name</label> 
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<!-- [3] 将 输入 绑 定 到 watchlist.name --> 
<input type="text" 
class="form-control™ 


id="1ist-name" 


placeholder="Name this watchlist" 
ng-model="watchlist.name" 
required> 


</div> 


<div class="form-group"> 
<label for="list-description">Brief Description</label> 
<!-- [4] 将 输入 绑 定 到 watchlist.description --> 
<input type="text" 
class="form-control™" 
id="1ist-description" 
maxlength="40" 
placeholder="Describe this watchlist" 
ng-model="watchlist.description" 
required> 


</div> 
</div> 


<div class="modal-footer"> 
<!-- [5] 在 单 击 时 创建 列表 ， 但 如 果 表 单 是 无 效 的 ， 那 么 它 将 处 于 禁用 状态 --> 
<button type="submit™" 
class="btn btn-success" 
ng-click="createList ()" 
ng-disabled="!]listForm.$valid">Create</button> 
<button type="button" 
class="btn btn-danger" 
ng-click="$hide()">Cancel</button> 


</div> 
</form> 
</div> 
</div> 
</div> 


该 模板 中 第 一 件 应 该 注意 的 事情 是 : 它 不 仅 引 用 了 附加 到 stkWatchlistPanel 指令 作用 


域 的 处 理 器 函数 ， 还 使 


了 由 $modal 服务 公开 的 $hide() 方 法 [1]。 因 为 需要 收集 用 于 创建 新 


的 监视 列表 的 必需 信息 ， 这 里 使 用 了 一 个 HIML <form>[2]。 请 特别 关注 name="listForm" 
特性 ， 因 为 这 就 是 引用 表单 用 于 检查 有 效 性 的 方式 。 两 个 <input> 标 记 都 使 用 ng-model 指 
令 进行 了 增强 ， 该 指令 将 分 别 把 输入 值 绑 定 到 在 指令 的 link0 函数 中 初始 化 的 
$scope.watchlist 变量 ([3] 和 [4])。 在 这 两 个 输入 中 也 要 求 使 用 HTML required 特性 ， 因 为 我 
们 希望 在 创建 新 的 监视 列表 之 前 ， 确 保 用 户 同时 指定 了 名 字 和 描述 。 最 后 ， 在 Create 按钮 
被 单 击 时 调用 指令 的 createList0 处 理 器 ， 但 是 只 有 在 表单 有 效 的 情况 下 才 会 调用 。 内 置 的 
ng-disabled 指令 将 根据 !listForm $valid 表达 式 的 执行 结果 禁用 或 启用 按钮 。 
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2. 使 用 指令 


现在 你 已 经 完成 了 stkWatchlistPanel 指令 和 相关 模板 的 创建 ， 接 下 来 将 看 到 在 HTML 
中 引用 它 是 多 么 简单 。 打 开 app/index.html 文件 并 在 标记 了 footer 类 的 <div> 标 记 之 前 插入 
下 面 的 代码 : 


<stk-watchlist-panel></stk-watchlist-panel> 


此 时 ,你 可 能 会 好 奇 为 什么 指令 被 用 作 一 个 HTML 元 素 标记 ， 而 不 是 特性 。 如 果 还 记 
得 的 话 ，stkWatchlistPanel 指令 的 restrict 配置 属性 被 设置 为 E， 这 意味 着 该 指令 将 被 用 作 
HTML 元 素 。 开 始 看 起 来 也 许 有 点 怪 , 尽管 该 指令 使 用 驼峰 命名 法 进行 注册 , 但 是 在 HTML 
内 部 它 将 通过 spinal-case 的 方式 进行 引用 。 这 是 因为 HTML 是 大 小 写 不 敏感 的 ， 所 以 
Angular 将 使 用 自己 的 命名 规范 规范 化 该 指令 名 称 。 保存 了 之 前 对 index.html 文件 的 修改 之 
后 ，Grunt 将 自动 触发 浏览 器 刷新 ， 目 前 的 应 用 看 起 来 应 该 如 图 1-5 所 示 。 


Use + to create a list 


图 1-5 


单 击 监视 列表 面板 中 的 绿色 加 号 按钮 ， 应 该 启动 包含 了 监视 列表 创建 表单 的 Bootstrap 
模 态 框 ， 如 图 1-6 所 示 。 


Create New Watchlist 


Name this watchlist 


Brief Description 


Describe this watchlist 


图 1-6 


蒜 喜 ! 你 已 经 成 功 实现 了 StockDog 应 用 的 监视 列表 特性 。 通过 这 个 过 程 ,你 已 经 看 到 
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如 何 创建 一 个 使 用 HIMLS LocalStorage 的 AngularJS 服务 ， 以 及 如 何 创建 操作 DOM 并 连 
接 几 个 服务 的 指令 。 请 花 上 一 分 钟 时 间 来 享受 你 的 杰作 : 创建 一 些 监视 列表 , 刷新 浏览 器 ， 
确认 它们 确实 已 经 被 存储 到 LocalStorage 中 ， 然 后 从 监视 列表 面板 中 删除 它们 ， 确 保 所 有 
功能 都 能 正常 工作 。 如 果 被 阻塞 在 了 这 个 步骤 的 任意 一 个 点 上 ， 那 么 请 花 一 点 时 间 检 查 本 
章 附加 代码 中 step-2 目录 所 包含 的 完整 代码 ， 或 者 签 出 GitHub 仓库 中 对 应 的 标签 。 


1.5 步骤 3: 配置 客户 端 路 由 


客户 端 路 由 是 所 有 单 页 面 应 用 的 一 个 关键 组 件 。 幸 亏 ，AngularJS 使 映射 URL 到 各 种 
前 端 视图 这 个 任务 变 得 极其 简单 。 在 StockDog 当前 的 状态 中 , 除了 index.html 文件 之 外 并 
未 包含 其 他 额外 的 HTML 视图 ，index.html 中 使 用 stk-watchlist-panel 指令 包含 了 一 个 内 幅 
的 监视 列表 面板 。 在 本 节 ， 将 学 习 如 何 使 用 路 由 机 制 将 AngularJS 控制 器 和 HTML 模板 结 
合 在 一 起 ， 管 理 StockDog 应 用 的 两 个 主 视图 。 


1.5.1 Angular ngRoute 模块 


在 搭建 StockDog 应 用 的 初始 阶段 ,Yeoman 会 问 你 是 否 希 望 安装 所 有 补充 的 AngularJS 
模块 。 其 中 一 个 模块 就 是 angular-route， 它 将 公开 ngRoute 模块 (可 以 被 列 为 应 用 的 一 个 依 
赖 )。 可 以 通过 查看 app/scripts/appjjs 文件 的 内 容 ， 并 定位 到 主 stockDogApp 模块 定义 的 依 
赖 数组 中 ngRoute 引用 的 方式 ， 验 证 该 模块 是 否 已 经 正确 地 进行 了 安装 ， 如 下 所 示 : 


angular 
.module('stockDogApp', [ 
'ngAnimate', 
'ngCookies', 
'ngResource', 
'ngRoute', // Include angular-route as dependency 
'ngSanitize', 
"ngTouch' 
"mgcrea.ngStrap'" 


]) 


注意 : 

在 开发 将 来 的 AngularJS 应 用 时 ， 你 毫 无 疑问 会 使 用 到 (或 公开 ) 几 个 AngularJS 模块 。 
AngularJS 团队 正式 地 维护 了 这 些 模块 中 的 一 些 ， 如 “Angular ngRoute 模块 ”一 节 提 到 的 
大 多 数 模块 ， 以 及 几 个 正在 由 社区 创建 的 模块 。 当 你 安装 新 的 模块 时 (通常 是 通过 Bower)， 
还 必须 查看 它 的 文档 ， 并 正确 地 将 对 应 的 模块 引用 包含 为 应 用 的 依赖 。 


模块 ngRoute 公开 了 Sroute 服务 ， 而 且 可 以 使 用 相关 的 SrouteProvider 进行 配置 ， 这 将 
多 许 你 声明 如 何 将 应 用 的 路 由 映射 到 视图 模板 和 控制 器 。 提 供 者 是 创建 服务 实例 并 公开 配 
置 API( 可 用 于 控制 器 服务 的 运行 时 行为 ) 的 对 象 。 第 7 章 将 详细 讲解 提供 者 ， 不 过 现在 可 
以 使 用 $routeProvider 定义 应 用 路 由 ， 并 实现 深度 链接 即 可 ， 这 将 允许 你 使 用 浏览 器 的 历史 
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导航 ， 并 在 应 用 中 收藏 位 置 。 
1.5.2 ”添加 新 的 路 由 


在 应 用 中 添加 新 路 由 的 过 程 由 4 个 不 同 的 步骤 组 成 : 

(1) 定义 新 的 控制 器 

(2) 创建 HTML 视图 模板 

(3) 调用 $routeProvider when(path, route) 方 法 

(4) 如 果 新 的 控制 器 驻 留 在 它 自己 的 JavaScript 文件 中 ， 那 么 在 index.html 文件 中 包含 
一 个 <scrip 忆 标记 引用 。 

只 有 当 你 的 项 目 结构 与 StockDog 应 用 匹配 时 才 需 要 第 4 步 ， 此 时 每 个 新 的 AngularJS 
组 件 都 将 驻 留 在 自己 的 JavaScript 文件 中 。 尽 管 这 4 个 步骤 自身 非常 简单 ， 但 是 将 它们 应 
用 在 含有 许多 路 由 、 视 图 和 控制 器 的 庞大 应 用 中 时 ， 这 可 能 会 变 成 一 个 乏味 的 过 程 。 幸 气 ， 
AngularJS Yeoman 生成 器 包含 了 一 个 子 生成 器 ， 用 于 完全 自动 化 这 个 4 步骤 过 程 。 请 在 终 
端 中 运行 下 面 的 命令 ,搭建 出 StockDog 应 用 的 仪表 盘 和 监视 列表 视图 的 AngularJS 控制 器 、 
HTML 模板 和 $routeProvider 配置 : 


yo angular:route dashboard 
yo angular:route watchlist --uri=watchlist/:1istId 


通过 这 两 个 简单 的 命令 ， 你 已 经 指示 Yeoman 在 app/scripts/controllers/ 目 录 中 创建 出 
dashboard.js 和 watchlist.js 文 件 。 这 两 个 文件 分 别 定 义 了 DashboardCtrl 和 WatchlistCtrl。 男 外 
还 有 app/views/ 目 录 中 的 dashboard.html 和 watchlist.html 视 图 ,因为 Yeoman 为 目标 路 由 控制 器 
创建 了 两 个 新 的 JavaScript 文 件 ， 所 以 它 还 将 在 index.html 文 件 的 底部 插入 两 个 必需 的 
<scripf> 标 记 。 你 可 能 已 经 注意 到 第 二 个 命令 使 用 参数 --uri 标 志 调用 了 路 由 子 生 成 器 。 这 将 
指示 Yeoman 在 配置 SrouteProvider 时 使 用 一 个 显 式 定义 的 路 径 ( 在 这 种 情况 下 是 必需 的 ， 
因为 SotckDog 中 创建 的 每 个 监视 列表 都 有 自己 的 唯一 视图 ), 它 是 从 listId( 作 为 路 由 参数 传 
递 ) 生 成 得 到 的 。 请 看 app/scripts/appjs 的 内 容 ， 你 应 该 看 到 Yeoman 创 建 的 下 列 
S$routeProvider when() 配 置 : 


.when('/dashboard', { 
templateUrl: 'views/dashboard.html', 
controller: 'Dashboardctrl' 

.when('/watchlist/:1listId', { 
templateUrl: "Views/watchlist.html'， 
controller: 'Watchlistctrl' 

} 


在 继续 学 习 下 一 节 之 前 ， 请 花 一 点 时 间 更 新 该 文件 底部 $routeProvider.otherwise() 函 数 


中 使 用 的 路 径 。 目 前 属性 redirectTo 指向 的 是 /"， 但 此 时 我 们 希望 将 它 指向 /dashboard ， 因 
为 这 是 StockDog 应 用 的 主页 面 。 
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1.5.3 ”使 用 路 由 


添加 新 的 客户 端 路 由 以 及 链接 主干 仪表 盘 和 监视 列表 视图 的 所 有 必需 工作 都 完成 之 
后 ， 现 在 就 可 以 开始 使 用 已 配置 的 路 由 将 StockDog 的 页 面 链 接 在 一 起 。 打 开 
stkwatchlistpaneljs 文件 ， 其 中 包含 了 泻 染 监视 列表 面板 的 指令 ， 并 将 AngularJS 
S$routeParams 服务 注入 为 依赖 (与 当前 的 $location 、$modal 和 WatchlistService 依赖 一 
样 )。.directive(O 函 数 的 调用 现在 应 该 如 下 所 示 : 


.directive('stkWatchlistPanel', 
function ($location, $modal, $routeParams, WatchlistService) 


现在 添加 一 个 新 的 $scope 变量 ， 用 于 追踪 当前 正在 显示 的 监视 列表 ， 以 及 把 用 户 发 送 
到 目标 监视 列表 视图 的 gotoList0 函 数 。 可 以 通过 将 下 面 的 代码 添加 到 指令 实现 中 的 方式 完 
成 该 任务 : 


$scope.currentList = $routeParams.1istId; 
$scope.gotoList = function (listId) { 
$location.path('watchlist/' + listId); 
] 7 
再 次 ，$location 服 务 被 用 于 将 用 户 路 由 到 目标 监视 列表 视图 ， 其 中 包含 了 listtd。 此 时 ， 
你 可 能 会 问 这 个 被 传 入 到 gotoList0 函 数 中 的 listID 来 自 哪里 。 如 果 还 记得 的 话 , 在 第 一 次 创 
建 watchlist-panelhtml 模板 视图 时 ， 我 们 使 用 内 置 的 ng-repeat 指 令 遍 历 了 所 有 从 
WatchlistService 获 得 的 监视 列表 。 为 了 将 该 函数 链接 到 指令 的 模板 ， 需 要 在 <a> 标 记 中 添加 
ng-click 指 令 ， 其 中 包含 了 对 gotoList0 函 数 的 调用 ， 它 将 在 DOM 元 素 被 单 击 时 执行 。 因 为 
stkWatchlistPanel 被 同时 用 在 主 仪表 盘 视 图 和 每 个 监视 列表 视图 中 ， 所 以 应 该 继续 在 相同 的 
元 素 中 添加 一 个 ng-class 指 令 ， 它 可 以 将 Bootstrap 提 供 的 active 类 添加 到 用 户 正 在 查看 的 列 
表 的 <a> 标 记 中 。 对 app/view/templates/ 目 录 中 watchlist-panel.html 文 件 的 修改 如 下 所 示 : 


<a class="list-group-item" 

ng-class="{ active: currentList == list.id }" 

ng-repeat="1list in watchlists track by $index" 

ng-click="gotoList (list.id)"> 

注意 ， 新 定义 的 currentList 变量 被 附加 到 $scope 中 ， 用 于 计算 active 类 在 元 素 中 是 否 
存在 。 在 下 一 节 ， 将 学 习 仪 表盘 和 监视 列表 的 基础 结构 。 因 为 <stk-watchlist-panel> 元 素 被 
同时 用 在 这 两 种 视图 的 上 下 文中 ， 请 花 一 点 时 间 从 index.html 文件 中 删除 它 目前 的 引用 。 


1.5.4 “模板 视图 


此 时 , 你 可 能 好 奇 为 什么 AngularJS 知道 如 何 为 每 个 已 配置 的 路 由 加 载 在 $routeProvider 
的 template 选项 中 指定 的 dashboard.html 和 watchlisthtml 视图 。 在 这 个 功能 背后 关键 的 组 
件 是 ngView 指令 ,在 开始 使 用 Yeoman 搭建 自己 的 项 目 时 ， 它 就 被 添加 到 了 index.html 文 
件 中 。 该 指令 要 求 安装 ngRoute 模块 ， 负 责 在 布局 模板 (在 本 例 中 指 的 就 是 index.html 文件 ) 
中 插入 由 $route 服务 定义 的 视图 模板 。 重 要 的 一 点 是 : 路 由 的 模板 被 插入 到 <ng-view> 元 素 


[Rl 
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所 驻 留 的 准确 DOM 位 置 。 

在 它 目 前 的 状态 中 ，StockDog 应 用 没有 任何 有 用 的 功能 ， 所 以 请 继续 修改 你 生成 的 
dashboard.html 和 watchlist.html 文件 ， 分 别 按照 代码 清单 1-6 和 代码 清单 1-7 修改 它们 的 
内 容 。 


代码 清单 1-6: app/views/dashboard.html 


<div class="row"> 
<!-- 左 列 --> 
<div class="col-md-3"> 
<stk-watchlist-panel></stk-watchlist-panel> 
</div> 


<!-- 右 列 --> 


<div class="col-md-9"> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<span class="glyphicon glyphicon-globe"></span> 
Portfolio Overview 
</div> 
<div class="panel-body"> 
</div> 
</div> 
</div> 
</div> 


代码 清单 1-7: app/views/watchlist.html 


<div class="row"> 
<!-- 左 列 --> 
<div class="col-md-3"> 
<stk-watchlist-panel></stk-watchlist-panel> 
</div> 


= 市 到 一 > 
<div class="col-md-9"> 
</div> 

</div> 


dashboard.html 和 watchlist.html 模 板 都 使 用 Bootstrap 的 网 格 系统 创建 了 两 个 不 同 的 列 ， 
将 <stk-watchlist-panel> 包 含 在 每 个 视图 的 左 列 中 。 现 在 对 这 两 个 文件 的 修改 就 完成 了 ， 接 
下 来 请 在 浏览 器 中 访问 网 址 http://localhost:9000/#/dashboard 来 浏览 Dashboard 视 图 。 出 于 测 
试 的 目的 ， 请 花 一 点 时 间 在 面板 中 添加 一 个 新 的 监视 列表 ， 然 后 单 击 新 创建 的 列表 项 。 我 
们 添加 的 ngClick 指 令 应 该 执行 stkWatchlistPanel 指 令 的 gotoList0 函 数 , 从 而 使 应 用 将 你 路 由 
到 监视 列表 的 一 个 唯一 命名 的 视图 中 。 现 在 你 应 该 在 浏览 器 的 地 址 栏 中 看 到 这 个 网 址 
http://localhost:9000/#/watchlist/1。 按 下 浏览 器 的 Back 按 钮 将 把 你 带 回 到 主 Dashboard 视 图 。 
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恭喜 ! 你 已 经 成 功 为 StockDog 应 用 的 两 个 视图 实现 了 客户 端 路 由 。 通 过 这 个 过 程 ， 你 
已 经 看 到 了 如 何 使 用 ngRoute 模块 在 AngularJS 应 用 中 实现 深度 链接 ， 并 学 习 了 如 何 使 用 
ngView 指令 加 载 路 由 模板 。 如 果 被 阻塞 在 了 这 个 步骤 的 任意 一 个 点 上 , 那么 请 花 一 点 时 间 
检查 本 章 附加 代码 中 step-3 目录 所 包含 的 完整 代码 ， 或 者 签 出 GitHub 仓库 中 对 应 的 标签 。 


1.6 ”步骤 4: 创建 导航 栏 


实现 了 客户 端 路 由 后 ， 现 在 请 花 一 点 时 间 使 用 原生 Bootstrap 组 件 装饰 一 下 StockDog 
应 用 的 导航 栏 。 在 它 目前 的 状态 中 ， 应 用 的 导航 栏 与 开始 使 用 Yoeman 生成 器 搭建 的 导航 
栏 并 没有 什么 区 别 。 在 本 节 ， 将 使 用 一 个 更 加 流畅 的 导航 栏 替换 默认 导航 栏 ， 并 允许 在 
StockDog 应 用 的 两 个 主 视图 之 间 进 行 适当 的 导航 。 


1.6.1 更 新 HTML 


首先 ， 需 要 从 目前 的 app/index.html 文件 中 删除 一 些 代 码 。 请 打开 该 文件 并 开始 删除 
从 包含 了 起 始 <body ng-app="stockDogApp"> 标 记 的 行 (大 约 在 第 19 行 )， 直 到 包含 了 <! 一 
build:js(.) scripts/vendorjs 一 > 的 HTML 注释 之 前 (大 约 在 第 61 行 ) 的 所 有 代码 。 如 果 一 直 都 
在 使 用 样 例 代码 ， 那 么 应 该 从 该 文件 中 删除 了 大 约 42 行 。 


注意 : 
非常 关键 的 一 点 是 : 不 要 删除 包含 <! 一 build:js(.) scripts/vendorjs 一 > 的 HTML 注释 ， 
因为 构建 系统 将 使 用 该 内 置 注释 , 用 于 优化 应 用 的 最 终 发 布 版 本 , 本 章 稍 后 将 会 进行 讨论 。 


现在 你 已 经 从 应 用 的 index.html 文件 中 删除 了 必需 的 行 ， 请 继续 在 被 删除 的 行 的 位 置 
插入 下 面 的 标记 : 


<!-- [1] 加 载 Mainctrl --> 
<body ng-app="stockDogApp" ng-controller="MainCtrl"> 
<nav class="navbar navbar-inverse" role="navigation" ng-cloak> 
<div class="container-fluid"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" 
data-toggle="collapse" data-target="#main-nav"> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="/">Stock Dog</a> 
</div> 


<!-- 收集 用 于 切换 的 nav 链接 和 其 他 内 容 --> 
<div class="collapse navbar-collapse" id="main-nav"> 
<ul class="nav navbar-nav navbar-right"> 


<!-- [2] 在 必需 的 元 素 中 添加 active 类 --> 
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<1li ng-class="{active: activeView === 'dashboard'}"> 
<a href="/">Dashboard</a> 

</li> 

<li ng-class="{active: activeView === 'watchlist'}" 


class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown"> 
Watchlists <b class="caret"></b> 
</a> 
<ul class="dropdown-menu"> 
<1i ng-if="!watchlists.length" class="dropdown-header"> 
No lists found 
</1i> 
<!-- [3] 为 每 个 监视 列表 创建 一 个 唯一 的 链接 --> 
<1Li ng-repeat="1list in watchlists track by $index"> 
<a href="/#/watchlist/{{1list.id}}">{{list.name}}</a> 
/E> 
</ul> 
</1i> 
</ul> 
</div><!“C“C /.navbar-collapse “CC> 
</div><! “CC /.container-fluid “CC> 
</nav> 
<!-- 主 容 器 --> 
<div class="container-fluid" id="main"> 
<div ng-view=""></div> 
<div class="footer"> 
<p>Built with <span class="glyphicon glyphicon-heart"></span></p> 
</div> 
</div> 


你 应 该 注意 到 这 块 HTML 代码 的 第 一 个 区 别 是 : 它 在 body 标记 上 使 用 了 ng-controller 
指令 [1]。 在 上 一 节 ， 我 们 学 习 了 如 何 使 用 ngRoute 模块 为 特定 的 路 由 加 载 目标 控制 器 和 视 
图 。 不 过 在 本 例 中 ， 我 们 希望 强制 AngularJS 加 载 MainCtrl 控制 器 ， 因 为 该 控制 器 中 包含 
了 无 论 目前 执行 什么 路 由 都 应 该 应 用 的 逻辑 。 这 种 方式 演示 了 一 个 将 应 用 范围 内 的 逻辑 封 
装 到 单个 控制 器 的 简单 方式 。 

该 标记 中 另 一 个 值得 一 提 的 改动 是 : 使 用 ng-class 指令 [2]， 根 据 activeView 作用 域 变 
量 的 值 将 Bootstrap active 类 添加 到 导航 菜单 链接 中 。 该 标记 中 最 后 为 导航 栏 使 用 的 
AngularJS 组 件 是 ng-repeat 指令 。 这 里 使 用 它 为 每 个 watchlist 作用 域 变量 创建 了 一 个 唯一 
的 <li>[3]。 该 样 例 展示 了 如 何 根据 AngularJS 控制 器 提供 的 数据 动态 生成 导航 链接 。 在 它 
目前 的 状态 中 ， 我 们 的 应 用 应 该 在 浏览 器 控制 台中 显示 出 错误 ， 因 MainCtrl 控制 器 尚未 定 
义 。 下 一 节 当 我 们 创建 和 实现 了 MainCtrl 控制 器 时 ， 这 个 问题 将 得 到 解决 。 


1.6.2 创建 MainCtrl 


你 已 经 看 到 了 如 何 使 用 Yeoman 子 生成 器 搭建 新 的 服务 、 指 令 和 路 由 。 现 在 将 按照 相 
同 的 流程 使 用 Yeoman 搭建 一 个 新 的 AngularJS 控制 器 。 为 了 完成 这 个 任务 ， 请 在 命令 行 
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中 运行 下 面 的 命令 : 


yo angular:controller Main 


该 命令 将 指示 Yeoman 在 app/scripts/controllers/mainjs 文 件 中 创建 一 个 名 为 MainCtrl 的 新 
控制 器 ， 并 在 app/index.html 文 件 中 添加 适当 的 <scripf> 标 记 引 用 。 打 开 新 创建 的 文件 并 使 用 
代码 清单 1-8 所 示 的 代码 蔡 换 它 的 完整 内 容 。 


代码 清单 1-8: app/scripts/controllers/main.js 
"use strict'; 


angular.module ('stockDogApp') 
.controller('MainCtrl', function ($scope, $location, WatchlistService) { 
// [1] 为 动态 导航 链接 填充 监视 列表 


$scope.watchlists = WatchlistService.query(); 


// [2] 将 $location.path() 函数 用 作 $watch 表达 式 
$scope.$watch(function () { 
return $location.path(); 
}, function (path) { 
if (_.contains(path, 'watchlist')) { 
$scope.activeView = 'watchlist'; 
} else { 
$scope.activeView = 'dashboard'; 


DD); 
4 

MainCtrl 同时 使 用 了 S$location 服务 (由 AngularJS 提供 ) 以 及 WatchlistService( 本 章 之 前 
创建 )。WatchlistService 用 于 填充 $scope.watchlist 变量 [1]， 该 变量 将 被 用 在 标记 中 ， 用 于 为 
顶级 监视 列表 导航 项 动态 地 创建 多 个 下 拉 列 表 。 该 路 由 器 为 了 解析 当前 的 应 用 路 由 ， 结 合 
使 用 了 S$location 服务 和 $scope.watch() 函 数 ， 使 得 每 次 $location.path() 函 数 的 返回 值 改变 时 ， 
可 调 函 数 都 可 以 正确 地 更 新 $scope.activeView 变量 (使 用 Lodash 提供 的 _.contains() 函 数 )， 
句 导航 栏 中 添加 一 个 active 类 。 稍 后 将 详细 讲解 $scope.$watch0 函 数 , 现在， 所 有 需要 知道 
的 就 是 它 将 监视 第 一 个 函数 的 返回 值 的 变化 ， 并 在 每 次 改动 时 调用 指定 为 第 二 个 参数 的 回 
应 用 的 导航 栏 现在 应 该 完全 可 以 正常 运行 了 。 参 见 图 1-7。 出 于 测试 的 目的 ， 请 创 
建 一 个 新 的 监视 列表 (如 果 尚 未 这 样 做 的 话 )， 然 后 通过 选择 导航 栏 中 Watchlists 下 拉 菜 
单 中 合适 的 链接 浏览 该 监视 列表 。 接 着 点 击 Dashboard 链接 返回 到 StockDog 应 用 的 初 
始 视 图 。 
如 果 被 阻塞 在 了 这 个 步骤 的 任意 一 个 点 上 ， 那 么 请 花 一 点 时 间 检 查 本 章 附 加 代码 中 
step-4 目录 所 包含 的 完整 代码 ， 或 者 签 出 GitHub 仓库 中 对 应 的 标签 。 
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图 1-7 


1.7 步骤 5: 添加 股票 


将 要 为 StockDog 实现 的 下 一 个 主要 功能 是 向 监视 列表 中 添加 股票 的 能 力 。 通 过 类 似 的 
方式 ， 用 户 可 以 向 他 们 的 投资 组 合 中 添加 新 的 监视 列表 ， 需 要 创建 一 个 新 的 模 态 框 ， 用 于 
在 单 击 了 监视 列表 视图 上 的 特定 按钮 之 后 显示 。 该 模 态 框 将 允许 用 户 搜索 在 NYSE、 
NASDAQ 和 AMEX 股票 交易 所 上 市 的 公司 ， 并 将 它们 以 及 指定 数量 的 股票 添加 到 目标 监 
视 列 表 中 。 本 节 将 讲解 如 何 使 用 AngularJS 提供 的 各 种 不 同 机 制 完 成 该 任务 。 
1.7.1 创建 CompanyService 

第 一 件 事 是 创建 一 个 新 的 AngularJS 服务 ， 它 将 负责 获得 一 个 公司 的 列表 ， 并 从 3 个 

主要 的 交易 所 获得 相关 数据 。 通常， 这 可 以 通过 与 某 种 后 端 服务 通信 获得 , 但 对 于 该 应 用 ， 

我 们 已 经 创建 了 一 个 JSON 文件 。 可 以 在 相关 样 例 代 码 的 step-5/app/ 目 录 中 找到 
companies.json 文件 ， 也 可 以 在 GitHub 仓库 https://github.com/diegonetto/stock-dog 的 app/ 
目录 中 找到 它 。 一 旦 下 载 了 该 文件 ， 请 将 它 保存 在 本 地 项 目的 app/ 目 录 中 。 接 下 来 ， 运 行 
下 面 的 命令 搭建 并 连接 新 的 AngularJS 服务 : 


yo angular:service Company-Service 


该 命令 将 在 app/scripts/services 目录 中 创建 一 个 company-service.js 文件 。 该 服务 的 实 
现 如 代码 清单 1-9 所 示 。 注 意 作 为 依赖 注入 的 Sresource 服务 ， 它 将 创建 一 个 与 REST 风格 
的 服务 器 端 数 据 源 进行 交互 的 资源 对 象 ， 具 体 的 细节 将 在 第 8 章 进行 讲解 。 此 时 要 注意 的 
是 : $resource 服务 将 负责 从 本 地 文件 系统 中 获取 companies.json 文件 ， 并 返回 一 个 对 象 ， 
通过 该 对 象 可 以 查询 公开 交易 的 公司 列表 。 


代码 清单 1-9: app/scripts/services/company.js 
"use strict'; 
angular.module ('stockDogApp') 


.Service('CompanyService', function CompanyService($resource) { 
return $resource('companies.json'); 
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DD); 


很 快 将 会 用 到 这 个 新 创建 的 CompanyService， 但 是 在 继续 进入 下 一 节 之 前 ， 请 花 一 点 
时 间 打开 项 目 根 目录 中 的 Gruntfilejs 文件 ， 找 到 copy 任务 的 src 属性 ， 大 约 在 第 300 行 的 
位 置 。 需 要 在 src 数组 中 添加 json， 从 而 使 companies.json 文件 可 以 在 本 章 稍 后 为 生产 环境 
准备 应 用 时 被 复制 到 构建 的 发 行 包 中 。 修 改 之 后 ，src 数组 的 第 一 个 条 目 应 该 如 下 所 示 : 


Vw G0 pngr tty json 
1.7.2 创建 AddStock 模 态 框 


实现 CompanyService 后 ， 现 在 可 以 创建 一 个 新 的 视图 ， 它 将 被 用 作 模 态 框 ， 供 用 户 向 
当前 被 选择 的 监视 列表 中 添加 新 的 股票 。 在 app/views/templates/ 目 录 中 创建 一 个 名 为 


addstock- 


modalhtml 的 新 文件 。 该 视图 的 实现 如 代码 清单 1-10 所 示 。 


代码 清单 1-10: app/views/templates/addstock-modal.html 


<div class="modal" tabindex="-1" role="dialog"> 
<div class="modal-dialog"> 
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<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" 
ng-click="$hide()">&times;</button> 
<h4 class="modal-title">Add New Stock</h4> 
</div> 


<form role="form" id="add-stock" name="stockForm"> 
<div class="modal-body"> 
<div class="form-group"> 
<label for="stock-symbol">Symbol</label> 
// [1] 使 用 含有 标签 语法 的 ng-options 和 bs-typeahead 指令 
<input type="text" 
class="form-control™" 
id="stock-symbol" 
Placeholder="Stock Symbol" 
ng-model="newStock.company" 
ng-options="company as company .label for company in companies" 
bs-typeahead 
required> 
</div> 
// [2] 只 接受 所 拥有 股票 的 数量 
<div class="form-group"> 
<label for="stock-shares">Shares Owned</label> 
<input type="number" 
class="form-control™ 
id="stock-shares" 
placeholder="# Shares Owned" 
ng-model="newStock.shares" 
required> 
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</div> 
</div> 
<div class="modal-footer"> 
<button type="submit" 
class="btn btn-success" 
ng-click="addstock()" 
ng-disabled="!stockForm. $valid">Add</button> 
<button type="button" 
class="btn btn-danger" 
ng-click="$hide()">Cancel</button> 
</div> 
</form> 


</div> 
</div> 

</div> 

这 看 起 来 应 该 类 似 于 之 前 为 StockDog 添加 新 的 监视 列表 时 使 用 的 模 态 框 .第 一 个 输入 
[了 ] 将 使 用 来 自 AngularStrap 项 目的 bs-typeahead 指令 ， 它 将 使 用 原生 的 Angular ng-options 
指令 提供 运行 typeahead 机 制 所 需 的 数据 。 指 令 ng-options 将 接受 多 种 形式 的 语法 。 在 本 例 
中 ， 我 们 正在 强迫 它 使 用 companies 作用 域 变量 中 每 个 公司 对 象 的 lable 属性 (该 变量 稍 后 
将 在 WatchlistCtrl 中 创建 )， 因 为 数据 将 被 显示 在 typeahead 建议 中 。 第 二 个 输入 [2] 简 单 地 
允许 用 户 指定 拥有 特定 股票 份额 的 数量 。 


1.7.3 更 新 WatchlistService 


在 继续 开发 WatchlistCtrl 和 相关 的 监视 列表 视图 之 前 ， 需 要 对 现 有 的 WatchlistService 
做 出 一 些 修改 。 为 了 抽象 出 监视 列表 和 它们 的 相关 股票 之 间 的 各 种 计算 和 交互 ， 将 创建 两 
个 不 同 的 对 象 用 作 所 需 行为 的 模型 。 在 watchlistservicejs 文件 的 服务 实现 函数 的 顶部 (在 
app/scripts/services/ 目 录 中 ) 添 加 如 下 代码 ， 使 用 save() 函 数 创建 一 个 StockModel 对 象 : 


// 使 用 额外 的 辅助 函数 增强 股票 
Var StockModel = { 
save: function () { 
var watchlist = findById(this.1istId); 
watchlist.recalculate(); 
saveModel (); 
} 
}; 


因为 监视 列表 由 许多 股票 组 成 ， 你 还 需要 创建 一 个 含有 addStock()、removeStock() 和 
recalculate() 函 数 的 WatchlistModel， 如 下 所 示 : 


// 使 用 额外 的 辅助 函数 增强 监视 列表 
Var WatchlistModel = { 
addStock: function (stock) { 
Var existingStock = _-find(this.stocks，function (s) { 
return s.company.symbol === stock.company.symbol; 
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1 

if (existingstock) { 
existingStock.shares += stock.shares; 

} else { 

_-extend(stock, StockModel); 
this.stocks.push (stock); 

} 

this.recalculate (); 

saveModel (); 

}, 
removeSstock: function (stock) { 

_-remove (this.stocks, function (s) { 
return s.company.symbol === stock.company.symbol; 

| 

this.recalculate(); 

saveModel (); 

}, 
recalculate: function () { 

Var calcs = _.reduce (this.stocks, function (calcs, stock) { 
calcs.shares += stock.shares; 
calcs.marketValue += Stock.marketValue7 
calcs .dayChange += stock.dayChange; 
return calcs; 

}, { shares: 0, marketValue: 0, dayChange: 0 }); 


this.shares = calcs.shares; 
this .marketValue = calcs.marketValue; 
this.dayChange = calcs.dayChange; 
} 
] 7 


最 后 ， 需 要 修改 从 LocalStorage 中 序列 化 和 反 序 列 化 数据 的 方法 ， 因 为 将 要 扩展 之 前 
的 两 个 模型 ， 从 而 在 内 存 中 创建 管理 应 用 所 需 的 适当 数据 结构 。 修 改 现 有 的 loadModel() 
和 this.save() 函 数 ， 如 下 所 示 : 


// 辅 助 函数 : 从 localstorage 中 加 载 监视 列表 
Var loadModel = function () { 
Var model = { 
watchlists: localStorage['StockDog.watchlists'] ? 
JSON.parse (localSstorage['StockDog.watchlists']) : [], 
nextId: localStorage['StockDog.nextId'] ? 
parseInt (1ocalStorage['StockDog.nextId']) : 0 
站 过 
_-each (model.watchlists，function (watchlist) { 
_-extend (watchlist, WatchlistModel); 
_-each (watchlist.stocks, function (stock) { 
_-extend(stock, StockModel); 
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return model; 
1; 


td 


// 将 一 个 新 的 监视 列表 保存 到 监视 列表 模型 了 

this.save = function (watchlist) { 
watchlist.id = Model.nextId++; 
watchlist.stocks = []; 
_.extend (watchlist, WatchlistModel); 
Model .watchlists.push (watchlist); 
saveModel (); 

}; 


1.7.4 实现 WatchlistCtrl 


接 下 来 , 将 修改 当前 的 WatchlistCtrl, 现在 它 仍然 是 一 个 由 Yeoman 在 搭建 过 程 中 创建 
的 空白 骨架 。 打开 app/scripts/controllers/ 目 录 中 的 watchlistjs 文件 ， 并 将 它 修改 为 如 代码 清 
单 1-11 所 示 的 内 容 。 


代码 清单 1-11: app/scripts/controllers/watchlist.js 


"use strict'; 


angular.module ('stockDogApp') 
.controller('WatchlistCtrl', function ($scope, $routeParams, $modal, 
WatchlistService, CompanyService) { 
// [1] 初始 化 
$scope.companies = CompanyService.query() 
$scope.watchlist = WatchlistService.query(SrouteParams .1istId) 
$scope.stocks = $scope.watchlist.stocks; 
$scope.newSstock = {}; 
Var addStockModal = $modal({ 
scope: $scope, 
template: 'views/templates/addstock-modal.html', 
show: false 
DD); 


// [2] 通 过 $scope 将 showStockModal 公开 给 视图 
$scope.showstockModal = function () { 

addstockModal .$promise.then (addSstockModal .show); 
4 


// [3] 调 用 WatchlistModel addstock () 函数 并 隐藏 模 态 框 
$scope.addstock = function () { 
$scope.watchlist.addstock({ 
listId: SrouteParams .1istId, 
company: $scope.newstock.company, 
shares: $scope.newSstock.shares 
vs 
addStockModal .hide (); 
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$scope.newStock = {}; 
] 
nD; 

你 应 该 注意 到 $routeParams、$modal、WatchlistService 和 CompanyService 都 已 经 通过 
依赖 的 方式 注入 了 。CompanyService 的 query() 函 数 (由 之 前 提 到 的 $resource 服务 所 返回 的 
对 象 提供 ) 被 调用 用 于 填充 companies 作用 域 变量 ， 该 变量 将 在 监视 列表 视图 中 临时 使 用 。 
其 余 的 代码 非常 直观 ,使 用 WatchlistService 初始 化 watchlist 作用 域 变量 , 然后 使 用 该 变量 
根据 通过 路 由 参数 传 入 的 listID 获取 当前 watchlist 变量 [1]。 接 下 来 ， 实 例 化 模 态 框 自身 ， 
并 定义 showStockModal0[2] 和 addStockO 函 数 [3]。 


1.7.5 ”修改 监视 列表 视图 


因为 对 监视 列表 的 修改 已 经 保存 并 加 载 了 ， 所 以 在 继续 更 新 监视 列表 视图 标记 之 前 ， 
请 花 一 点 时 间 从 应 用 中 删除 所 有 现存 的 监视 列表 。 完成 之 后 , 请 继续 修改 现 有 的 app/views/ 
watchlist.html 文件 ， 在 显示 股票 列表 的 位 置 包 含 一 个 Bootstrap 面板 。 以 现状 来 说 ,该 文件 
只 应 该 包含 一 个 由 两 列 组 成 的 行 ， 左 列 由 stk-watchlistpanel 指令 组 成 。 将 该 文件 的 右 列 修 
改 为 如 代码 清单 1-12 所 示 的 HTML 标记 。 


代码 清单 1-12: app/views/watchlist.html 


<div class="row"> 
<!-- 左 列 --> 
<div class="col-md-3"> 
<stk-watchlist-panel></stk-watchlist-panel> 
</div> 


<!-- 右 列 --> 
<div class="col-md-9"> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<span class="glyphicon glyphicon-list"></span> 
{{watchlist.description}} 
<button type="button" 
class="btn btn-success btn-xs pull-right" 
ng-click="showStockModal () "> 
<span class="glyphicon glyphicon-plus"></span> 
</button> 
</div> 
<div class="panel-body table-responsive"> 
<div ng-hide="stocks.length" class="jumbotron"> 
<hl>Woof.</hl> 
<p>Looks like you haven't added any stocks to this watchlist yet!</p> 
<p>Do so now by clicking the 
<span class="glyphicon glyphicon-plus"></span> located above. 
</p> 
</div> 
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<! 一 [1] 遍 历 所 有 的 股票 并 显示 公司 符号 -> 
<p ng-repeat="stock in stocks">{{stock.company.symbol}}</p> 
</div> 
</div> 
</div> 
</div> 


现在 ， 你 应 该 可 以 轻松 地 使 用 ng-click、ng-hide 和 ng-repeat 指令 了 ， 后 者 目前 被 用 于 
显示 股票 所 属 公司 的 股票 代号 。 在 稍 后 开始 构建 股票 表格 指令 时 , 将 需要 访问 该 股票 代号 。 

此 时 ， 你 应 该 能 够 通过 单 击 面板 头 部 的 绿色 加 号 按钮 在 被 选择 的 监视 列表 中 添加 一 个 
新 的 股票 、 通 过 搜索 公司 名 称 或 股票 代号 选择 一 只 股票 ， 以 及 单 击 目 标 typeahead 推 荐 ， 参 
见 图 1-8。 如 果 应 用 无 法 正常 工作 ， 那 么 请 检查 浏览 器 开发 者 工具 控制 台中 存在 的 错误 ， 并 
花 一 点 时 间 检 查 本 节 包 含 的 代码 。 可 以 参考 本 章 附 带 代 码 中 的 step-5 目 录 , 或 者 检查 GitHub 
仓库 中 对 应 的 标记 。 


Add New Stock 


Symbol 
| Applel 


| DPS - Dr Pepper Snapple Group, Inc 


MLP - Maui Land & Pineapple Company, Inc. 


图 1-8 


1.8 步骤 6: 集成 Yahoo Finance 


现在 StockDog 应 用 已 经 能 够 操作 监视 列表 和 股票 了 , 接 下 来 可 以 开始 从 外 部 服务 提供 
者 获取 报价 信息 一 一 在 本 例 中 将 使 用 Yahoo Finance。 本 节 将 创建 一 个 新 的 AngularJS 服务 ， 
它 将 负责 向 Yahoo Finance API 发 起 异步 HTTP 请 求 ， 并 更 新 内 存 中 的 数据 结构 。 


1.8.1 创建 QuoteService 


为 将 HTTP 请求 和 响应 解析 封装 到 一 个 可 重用 的 组 件 中 ， 将 创建 一 个 新 的 AngularJS 
服务 。 请 在 终端 中 运行 下 面 的 命令 ， 使 用 Yeoman 搭建 新 的 QuoteService: 


yo angular:service Quote-Service 


如 本 章 之 前 所 使 用 的 类 似 命 令 ， 在 本 例 中 它 将 在 app/scripts/services 目录 的 新 增加 的 
quote-service.js 文件 中 ， 创 建 一 个 名 为 QuoteService 的 AngularJS 服务 的 主干 实现 。 可 以 在 
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代码 清单 1-13 中 看 到 QuoteService 的 完整 实现 。 
代码 清单 1-13: app/scripts/services/quote-service.js 
wige Strict"s 


angular.module('stockDogApp') 
.Service('QuoteService', function ($http, $interval) { 
var stocks = []; 
var BASE = 'http://query.yahooapis.com/vl/public/yql'; 


// [1] 使 用 来 自 报价 的 适当 数据 更 新 股票 模型 
var update = function (quotes) { 
console.1log (quotes); 
if (quotes.length = stocks.length) { 
_.each (quotes, function (quote, idx) { 
Var stock = stocks[idx]; 
stock.lastPrice = parseFloat (quote.LastTradePriceOnly); 
stock.change = quote.Change; 
stock.percentChange = quote.ChangeinPercent; 
stock.marketValue = stock.shares * stock.lastPrice; 
stock.dayChange = stock.shares * parseFloat (stock.change); 
stock.save(); 
}); 
} 
] 7 


// [2] 管 理 获取 哪 只 股票 报价 的 辅助 函数 

this.register = function (stock) { 
stocks.push (stock); 

}; 

this.deregister = function (stock) { 
_ .Temove (Stocks， stock); 

让 

this.clear = function () { 
stocks = []; 

}; 


// [3] 与 Yahoo Finance API 通信 的 主 处 理 函数 
this.fetch = function () { 
var symbols = _.reduce(stocks, function (symbols, stock) { 
symbols.push (stock.company.symbol); 
return symbols; 
ks 
Var query = encodeURIComponent ('select * from yahoo.finance.quotes ' + 
"where symbol in (\'"' + symbols.join(',) + '\')'); 
Var url = BASE + '?' + 'q=' + query + '&format=jsongdiagnostics=true' + 
'&genv=http://datatables.org/alltables.env'; 
$http.jsonp(url + '&callback=JSON CALLBACK') 
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-Success (function (data) { 
if (data.query.count) { 
Var quotes = data.query.count > 1 ? 
data.query.results.quote : [data.query.results.quote]; 
update (quotes); 
} 
1) 
.error (function (data) { 
console.1log(data); 
]) 
}; 


// [4] 用 于 每 5 秒 抓 取 一 次 新 的 报价 数据 
$interval (this.fetch, 5000); 
DD); 

因为 QuoteService 负责 与 Yahoo Finance API 进行 通信 ， 你 会 注意 到 $http 服务 已 经 作 
为 依赖 注入 了 。Sinterval 服务 也 被 注入 了 ， 它 是 window.setInterval 的 Angular 封装 器 。 在 
内 部 ， 该 服务 将 追踪 一 个 股票 的 数组 (需要 获得 它们 的 报价 信息 )。updateO) 函 数 [1] 将 负责 把 
来 自 Yahoo Finance 的 响应 解析 成 所 需 的 股票 模型 属性 。 该 代码 还 包含 了 用 于 添加 、 移 除 和 
清空 被 追踪 股票 的 内 部 数组 的 辅助 函数 [2]。 最 后 ，fetch() 函 数 [3] 将 在 调用 $http 向 目标 终端 
发 送 异 步 请 求 之 前 ， 生 成 适当 的 Yahoo Finance 查询 URL。 然 后 来 自 Yahoo 的 响应 将 被 传 
入 update() 函 数 中 ， 执 行 之 前 所 描述 的 处 理 过 程 。 


1.8.2 ”从 控制 台 调用 服务 


因为 此 时 新 创建 的 QuoteService 尚未 被 注入 ， 也 未 在 SotckDog 应 用 的 任何 位 置 使 用 ， 
所 以 快速 检查 该 服务 最 简单 的 方式 就 是 在 浏览 器 开发 者 工具 的 控制 台中 输入 一 些 代码 。 请 
打开 它 并 将 下 面 的 代码 直接 粘贴 到 浏览 器 控制 台中 : 
Quote = angular.element (document .body) .injector() .get ('Quoteservice') 
Watchlist = angular.element (document .body) .injector () . 


get ('WatchlistSservice') 
Quote.register (Watchlist.query() [0] .stocks[0]) 


该 代码 将 获得 QuoteService 和 WatchlistService 的 引用 ,然后 使 用 第 一 个 可 用 监视 列表 
的 第 一 只 股票 调用 QuoteService 的 register0 函 数 (所 以 请 保证 你 至 少 已 经 创建 了 一 个 监视 列 
表 ， 并 至 少 添加 了 一 只 股票 )。 在 5 秒 之 内 ， 你 应 该 看 到 一 个 包含 了 单个 对 象 的 数组 。 该 对 
象 应 该 向 你 展示 所 有 由 Yahoo Finance API 为 一 只 特定 股票 提供 的 所 有 数据 , 类 似 于 图 1-9。 

现在 我 们 已 经 完成 了 QuoteService 的 创建 ， 并 验证 了 它 是 否 成 功 从 Yahoo Finance API 
抓 取 到 了 数据 ， 现 在 可 以 继续 学 习 下 一 节 的 内 容 ， 在 监视 列表 视图 的 表格 中 显示 该 数据 。 
如 果 应 用 无 法 正常 工作 , 请 参考 本 章 附 带 代码 中 的 step-6 目录 , 或 者 检查 GitHub 仓库 中 对 
应 的 标记 。 
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Ft | 
v0: 0bject 
AfterHoursChangeRealtime: "N/A - N/A" 
AnnualizedGain: null 
Ask: "112.87" 
AskRealtime: "112.87" 
AverageDailyVolume: "48785500" 
Bid: "112.80" 
BidRealtime: "112.80" 
BookValue: "19.815" 
Change: "+0.58" 
ChangeFromFiftydayMovingAverage: "+2.263" 
ChangeFromTwoHundreddayMovingAverage: "+8.719' 
ChangeFromYearHigh: "-6.77" 
ChangeFromYearLow: "+42.4729" 
ChangePercentRealtime: "N/A - +0.52%" 
ChangeRealtime: "+0.58" 
Change_PercentChange: "+0.58 — +0.52%" 
ChangeinPercent: "+0.52%" 


图 1-9 


1.9 步骤 7: 创建 股票 表格 


在 本 节 ， 你 将 看 到 AngularJS 指令 更 复杂 的 应 用 。 尤 其 是 ， 将 看 到 指令 如 何在 彼此 之 
间 交 互 数据 ， 因 为 本 节 将 构建 构建 一 个 表格 ， 用 于 显示 股票 的 绩效 信息 。 


1.9.1 创建 StkStockTable 指令 


首先 ， 将 为 股票 表格 创建 一 个 新 的 指令 。 如 你 之 前 多 次 看 到 的 ， 可 运行 下 面 的 命令 ， 
使 用 AngularJS Yeoman 生成 器 创建 指令 的 主干 : 


yo angular:directive stk-Stock-Table 


该 命令 将 在 app/scripts/directives 目录 中 创建 文件 stk-stock-table.js， 并 在 index.html 中 
添加 新 JavaScript 文件 的 链接 。stkStockTable 指令 的 实现 如 代码 清单 1-14 所 示 。 


代码 清单 1-14: app/scripts/directives/stk-stock-table.js 


"use strict'; 


angular.module ('stockDogApp') 
.directive('stkstockTable', function () { 
return { 
templateUrl: "views/templates/stock-table.html'， 
Pestrict: "EE"; 
// [1]1 隔 离 作用 域 
scope: { 
watchlist: '=" 
}, 
// [2] 创 建 一 个 控制 器 ， 它 将 用 作 该 指令 的 API 


controller: function ($scope) { 
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Var rows = []; 


$scope.$watch('showPercent', function (showPercent) { 
if (showPercent) { 
_-each (rows, function (row) { 
TOW. ShowPercent = showPercent; 
]) 
} 
1); 


this.addRow = function (row) { 
rows.push (row); 
] 7 


this .removeRow = function (row) { 
_ .Temove (rows, row); 

] 7 
， 
// [3] 标 准 的 链接 函数 实现 
link: function ($scope) { 

$scope.showPercent = false; 

$scope .removeStock = function (stock) { 
$scope.watchlist.removeStock (stock); 
] 7 

DD); 
首先 应 该 注意 的 是 : 该 指令 在 scope 属 性 中 包含 了 一 个 对 象 [1]。 通过 这 种 隔离 指令 作用 

域 的 方式 ， 可 以 绑 定 指令 的 DOM 元 素 的 一 个 特性 。 第 4 章 “ 数 据 绑 定 ”将 讲解 更 多 细节 ， 
对 于 现在 只 需要 知道 在 使 用 stkStockTable 指 令 时 ， 我 们 必须 包含 一 个 名 为 watchlist 的 特性 ， 
并 赋 给 它 一 个 用 于 执行 的 表达 式 即 可 。 另 外 对 于 该 样 例 要 注意 的 是 : 该 指令 包含 了 一 个 
controller 属 性 [2]。 通 常 ， 这 是 如 何 向 其 他 指令 公开 API 用 于 通信 的 方式 。 因 为 在 controller 
属性 的 实现 中 ，addRow0 和 removeRow0O 函 数 都 被 附加 到 了 this 对 象 中 ， 所 以 这 两 个 方法 对 
外 部 可 用 。 这 里 的 概念 是 : stkStockTable 指 令 在 内 部 将 追踪 表 中 的 所 有 行 。 这 将 允许 在 必 
要 的 时 候 修改 行 ， 例 如 ， 本 样 例 将 改变 每 行 作 用 域 中 的 showPercent 属 性 。 最 后 ， 该 指令 还 
包含 了 link 属 性 [3]( 它 通常 用 于 DOM 操 作 )， 在 本 例 中 该 属性 将 初始 化 showPercent 作 用 域 变 
量 ， 并 通过 顶级 指令 作用 域 公开 removeStock() 函 数 。 


1.9.2 创建 StkStockRow 指令 


现在 我 们 已 经 创建 了 主要 的 stkStockTable 指令 ， 接 下 来 可 以 创建 一 个 每 个 表格 行 重复 
使 用 的 指令 。 可 运行 下 面 的 命令 行 创建 一 个 新 的 stkStockRow 指令 : 


yo angular:directive stk-Stock-Row 
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该 命令 将 在 app/scripts/directives 目录 的 stk-stock-rowjs 文件 中 创建 stkStockRow 指令 
的 主干 代码 。 该 指令 的 实现 将 如 代码 清单 1-15 所 示 。 


代码 清单 1-15: app/scripts/directives/stk-stock-row.js 
"use strict'; 


angular.module ('stockDogApp') 
.directive('stkStockRow', function ($timeout, QuoteService) { 
return { 
// [1] 用 作 元 素 特性 ， 并 需要 stkstockTable 控制 器 
Pontriots "he 
require: '^stkstockTable', 


scope: { 
Stocks "=*, 
isLast: '=" 


}, 
// [2] 所 需 的 控制 器 将 在 末尾 变 得 可 用 
link: function ($scope, $element, $attrs, stockTableCtr1) { 
// [3] 为 股票 行 创 建 提示 
$element .tooltip({ 
placement: "1eft 7 
title: $scope.stock.company.name 
}); 
// [4] 将 该 行 添加 到 Tablectrl 中 
stockTableCtr]l .addRow ($scope); 
// [5] 使 用 Quoteservice 注册 该 股票 
QuoteService.register($scope.stock) 7 
// [6] 在 $destroy 上 使 用 Quoteservice 取消 公司 的 注册 
$scope.$on('$destroy', function () { 
stockTableCtr]l .removeRow ($scope); 
QuoteService.deregister ($scope.stock); 
]) 7 
// [7] 如 果 这 是 “股票 行 ”的 最 后 一 行 ， 立 即 抓 取 报价 
if ($scope.isLast) { 
$timeout (QuoteService.fetch); 


} 
// [8] 监视 份额 的 变化 并 重新 计算 字段 
$scope.$watch('stock.shares', function () { 
$scope.stock.marketValue = $scope.stock.shares * 
$scope.stock.lastPrice; 
$scope.stock.dayChange = $scope.stock.shares * 
parseFloat ($scope.stock.change); 
$scope.stock.save(); 
]) 


DD); 
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对 于 该 指令 ， 只 有 S$timeout 和 QuoteService 作为 依赖 被 注入 了 。 另 外 ， 你 可 能 已 经 注 
意 到 了 restrict 属性 被 设置 为 A, 这 意味 着 stkStockRow 应 该 被 用 作 DOM 元 素 的 一 个 特性 ， 
而 不 是 DOM 元 素 自身 (之 前 创建 的 指令 是 作用 于 DOM 元 素 自身 的 )。 你 还 应 该 注意 到 了 
require 属性 的 使 用 。 通 过 这 种 方式 将 告诉 指令 它 需要 一 个 特定 的 控制 器 ， 在 本 例 中 控制 器 
被 定义 在 stkStockTable 指令 中 。 前 级 ^ 将 指示 该 指令 在 它 的 父 作用 域 中 搜索 控制 器 ， 这 正 
是 我 们 希望 在 本 例 中 所 完成 的 事情 。 然 后 ， 可 以 通过 link 函数 的 最 后 一 个 参数 使 用 必需 的 
控制 器 ， 如 [2] 所 示 。 因 为 每 行 都 有 各 自 的 提示 标记 ， 所 以 该 指令 是 添加 提示 初始 化 代码 的 
绝 佳 位 置 [3]。 该 代码 的 剩余 部 分 将 使 用 stkStockTable 指令 的 addRow0) 函 数 为 每 一 行 注册 
$scope[4]， 使 用 QuoteService 在 创建 时 注册 该 行 的 股票 [5]， 并 在 行销 毁 时 注销 它 [6]。 如 果 
当前 创建 的 行 是 表格 的 最 后 一 行 ， 那 么 立即 触发 QuoteService.fetch() 调 用 [7]。 最 后 ， 使 用 
$watch() 监 视 股 票 份额 数目 的 变化 ， 从 而 做 出 合适 的 计算 [8]。 


1.9.3 创建 股票 表格 模板 


完成 stkStockTable 和 stkStockRow 指令 后 ， 接 下 来 要 做 的 是 为 股票 表格 创建 一 个 新 的 
HTML 模板 视图 。 可 在 app/views/templates/ 目 录 中 创建 一 个 名 为 stock-table html 的 新 文件 ， 
并 在 其 中 添加 如 代码 清单 1-16 所 示 的 标记 。 


代码 清单 1-16: app/views/templates/stock-table.html 


<table class="table"> 
<thead> 
<tr> 
<td>symbol</td> 
<td>Shares Owned</td> 
<td>Last Price</td> 
<td>Price Change 


<span> ( 
<!--[1] 在 单 击 时 改变 showPercent 作用 域 变 量 --> 
<span ng-disabled="showPercent === false"> 
<a ng-click="showPercent = !showPercent">$</a> 
</span>| 
<span ng-disabled="showPercent === true"> 
<a ng-click="showPercent = !showPercent">%</a> 
</span>) 
</span> 
</td> 


<td>Market Value</td> 
<td>Day Change</td> 
</tr> 
</thead> 
<!-- [2] 如 果 有 多 只 股票 存在 ， 那 么 只 显示 页 脚 --> 
<tfoot ng-show="watchlist.stocks.length > 1"> 
<tr> 
<td>Totals</td> 
<td>{ {watchlist.shares}}</td> 
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<td></td> 

<td></td> 
<td>{{watchlist.marketValue}}</td> 
<td>{{watchlist.dayChange}}</td> 


</tr> 
</tfoot> 
<tbody> 
<!-- [3] 使 用 stk-stock-row 为 每 只 股票 创建 一 行 --> 


<tr stk-stock-row 
ng-repeat="stock in watchlist.stocks track by $index" 
stock="stock" 
is-last="$last"> 
<td>{{stock.company.symbol}}</td> 
<td>{{stock.shares}}</td> 
<td>{{stock.lastPrice}}</td> 
<td> 
<span ng-hide="showPercent">{{stock.change}}</span> 
<span ng-show="showPercent">{{stock.percentCchange}}</span> 
</td> 
<td>{{stock.marketValue}}</td> 
<td>{{stock.dayChange}} 
<button type="button" class="close" 
ng-click="removeStock (stock) ">iA</button> 
</td> 
</tr> 
</tbody> 
</table> 


尽管 stock-table.html 文件 的 标记 并 不 太 复杂 , 但 是 有 些 内 容 值 得 一 提 . 首先, 在 <thead> 
中 ， 你 应 该 注意 到 Price Change 头 单元 格 中 包含 两 个 应 用 了 ng-click 指令 的 span， 用 于 将 
值 赋 给 showPercent 作用 域 变量 [1]。 这 是 使 用 这 种 形式 表达 式 的 第 一 个 样 例 ， 它 是 帮助 实 
现 简单 任务 的 有 用 方式 ， 在 本 例 中 可 以 用 它 切换 Boolean 值 而 不 必 创 建 一 个 作用 域 函 数 。 
你 还 应 该 注意 到 ng-show 的 使 用 ， 如 果 当 前 监视 列表 中 包含 了 多 只 股票 ， 就 只 显示 表格 页 
脚 ， 因 为 其 中 包含 了 计算 总 数 。 最 后 ， 尽 管 该 视图 模板 是 为 stkStockTable 指令 创建 的 ， 但 
是 在 底层 它 将 使 用 ng-repeat 创建 包含 了 stkStockRow 指令 的 <tr> 元 素 。 在 另 一 个 指令 的 模 
板 中 使 用 外 部 指令 是 完全 可 以 接受 的 ， 只 是 要 注意 不 要 让 自己 的 方式 过 于 复杂 ， 因 为 你 可 
E 会 遇 到 不 得 不 使 用 $compile 服务 手动 编译 子 指令 模板 的 情况 。 


1.9.4 更 新 监视 列表 视图 


在 完成 该 步骤 时 唯一 剩 下 的 任务 就 是 通过 将 stkStockTable 指令 包含 在 StockDog 的 监 
视 列 表 视 图 中 的 方式 调用 它 。 打 开 项 目的 app/views/watchlisthtml 文件 ， 并 定位 到 包含 了 
ng-repeat 的 <p> 标 记 。 与 显示 股票 的 公司 代号 相反 ， 你 可 能 希望 泻 染 完整 的 互动 表格 。 请 
使 用 下 面 的 代码 替换 该 行 代码 ， 实 现 这 个 任务 : 


<stk-stock-table ng-show="stocks.length" watchlist="watchlist"> 
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恭喜 你 成 功 完成 了 股票 表格 的 第 一 个 版 本 ! 参见 图 1-10。 你 可 能 在 想 它 并 不 是 你 曾经 
创建 的 最 漂亮 的 表格 ， 但 不 要 苦恼 。 在 接 下 来 的 三 个 小 节 中 ， 将 重新 把 它 定义 为 一 个 更 成 
熟 的 产品 。 在 下 一 节 中 ， 将 看 到 如 何 使 每 个 单元 格 变 得 可 编辑 ， 为 表格 添加 更 多 交互 性 。 


如 果 应 用 无 法 正常 工作 , 请 参考 本 章 附 带 代码 中 的 step-7 目录 , 或 者 检查 GitHub 仓库 中 对 
应 的 标记 。 
StockDog Watchlists ~ 
® Watchlists 这 Hottech stocks 
Symbol SharesOwned 。 Last Prce 。 Pice Change(s1%) MarketValue 。 Day Change 
Pharmaceutical MSFT 100 44.1 +0.11 4410 11 
a WR 100 49.86 +1.31 4986 131 
YHOO 100 44.55 +0.12 4455 12 
NFX 100 485.29 +6.96 48529 696 
LNKD 。 100 273.99 +4.99 27399 499 
AMZN 100 386.27 +0.90 38627 90 
Totals 600 128406 1439 
图 1-10 


1.10 


步骤 8: 内 联 表单 编辑 


现在 StockDog 有 了 一 个 可 以 工作 的 表格 , 它 可 以 为 监视 列表 中 正在 追踪 的 各 种 股票 显 
示 信 息 ， 下 一 步 是 通过 允许 用 户 编辑 每 只 股票 的 份额 数量 来 使 应 用 更 加 可 交互 。 因 为 数据 


正 被 显示 在 一 个 表格 中 ， 所 以 编辑 值 的 常见 方式 就 是 通过 内 联 的 方式 修改 它们 ， 


格 非常 和 


与 电子 表 


目 似 。 在 本 节 ， 将 看 到 如 何 创建 一 个 指令 ， 并 将 它 与 HIMLS 的 contenteditable 特性 


结合 使 


来 实现 该 功能 。 


1.10.1 


因为 新 的 指令 将 扩展 contenteditable 特性 的 功能 ， 所 以 它 必须 使 用 相同 的 名 字 。 可 在 


创建 contenteditable 指令 


终端 运行 下 面 的 命令 ， 使 用 Yeoman 搭建 一 个 新 的 AngularJS 指令 : 


yo 


angular:directive contenteditable 


E 


该 命令 将 在 app/scripts/directives/ 目 录 中 创建 一 个 名 为 contenteditablejjs 的 新 文件 。 指 令 
contenteditable 被 限制 为 一 个 特性 ， 它 将 对 用 户 输 入 的 数据 执行 清理 和 验证 。 可 以 在 代码 清 


单 1-17 中 找到 该 指令 的 完整 实现 。 


代码 清单 1-17: app/scripts/directives/contenteditable.js 


"use strict'; 
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Var NUMBER REGEXP = /^\s*(\-I\+)?(\d+| (\d*(\.\d*)))\s*$/; 


angular.module ('stockDogApp') 
.directive('contenteditable', function ($sce) { 
return { 
reostriets "AM", 
require: 'ngModel'，// [1] 获得 NgModelController 
link: function($scope, $element, $attrs, ngModelctrl) { 
if(!ngModelcCtrl) { return; } // 如 果 没 有 no ng-model， 则 什么 也 不 做 


// [2] 指 定 如 何 更 新 UI 
ngModelctrl.$render = function() { 

$element .html ($sce.getTrustedHtm] (ngModelCtr1.$viewValue || '')); 
] 7 


// [3] 读 取 HTML 值 ， 然 后 将 数据 写 入 模型 或 者 重 置 视图 
var read = function () { 
Var Value = S$element .html () 


if ($attrs.type === "number' && !NUMBER_REGEXP.test(value)) { 
ngModelCctrl.$render () 
} else { 


ngModelctrl.$setViewValue (value); 
} 
] 7 


// [4] 添加 基于 解析 器 的 自 定义 输入 类 型 (只 支持 'number') 
// This will be applied to the $modelValue 
if ($attrs.type === 'number') { 
ngModelCtr1.S$parsers.push(function (value) { 
return parseFloat (Value) 7 
We 
} 


// [5] 监听 改变 事件 ， 启 用 绑 定 
$element .on ('blur keyup change', function() { 
$scope.$apply (read); 
于 过 
} 
1; 
DD); 
与 stkStockRow 指令 一 样 ， 这 里 再 次 使 用 了 require 属性 ， 用 于 获得 外 部 指令 控制 器 的 
引用 。 在 本 例 中 ngModel 是 必需 的 [1]， 因 为 我 们 希望 使 用 Angular 的 双向 数据 绑 定 ， 根 据 
用 户 的 修改 触发 对 表格 剩余 部 分 的 更 新 。 接 下 来 ， 实 现 了 ngModelCtrl.S$renderO 函 数 ， 需 要 
使 用 它 通知 ngModel 指令 应 该 如 何 更 新 视图 。 这 里 还 使 用 了 Strict Contextual Escaping 服务 
$sce， 它 是 唯一 一 个 被 注入 的 依赖 ， 用 于 在 更 新 视图 的 HIML 之 前 清理 数据 [2]。 接 下 来 定 
义 的 是 read0 函 数 ， 它 将 检测 元 素 当 前 的 HIML 值 ， 如 果 它 的 类 型 属性 被 设置 为 number， 
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那么 使 用 正则 表达 式 测试 该 值 是 否 是 一 个 数字 。 在 本 例 中 ， 该 contenteditable 指令 只 用 在 
Shares Owned 单元 格 中 ， 所 以 它 只 支持 数字 类 型 ， 但 是 可 以 轻松 地 扩展 这 个 功能 ， 从 而 支 
持 其 他 输入 类 型 和 格式 。 如 果 当 前 值 不 是 一 个 数字 ，ngModelCtrlLSrender0 函 数 将 被 调用 ， 
使 用 之 前 的 值 更 新 视图 。 不 过 ， 如 果 用 户 实际 上 输入 了 一 个 有 效 的 数字 ， 那 么 该 指令 将 调 
用 ngModelCtrl.$setViewValue() ， 该 函数 会 使 用 新 的 值 调 用 Srender0 ， 并 启动 ngModel 
$parsers 管道 .这 里 定义 了 一 个 自 定义 解析 器 ,用 于 支持 数字 输入 类 型 [和 ]。 它 将 把 $viewValue 
解析 成 数字 ， 从 而 使 ngModel 可 以 更 新 SmodelValue， 然 后 该 值 就 可 以 被 正确 用 于 计算 股票 
表格 的 值 。 最 后 ,使 用 $element.on() 函 数 监听 blur、keyup 和 change 事件 ， 从 而 可 以 在 每 次 
修改 之 后 调用 read() 函 数 [5] 。 


1.10.2 更 新 StkStockTable 模板 


剩 下 的 所 有 工作 就 是 使 用 这 个 新 创建 的 contenteditable 指令 来 更 新 app/views/templates 
目录 中 的 stock-table html 文件 了 。 找 到 包含 了 <td> ffstock.shares}}</td> 的 那 行 代码 ， 并 使 
用 下 面 的 代码 替换 它 : 

<td contenteditable type="number" ng-model="stock.shares"></td> 

注意 特性 type 被 设置 为 number， 并 使 用 ng-model 绑 定 了 每 行 股票 对 象 的 份额 值 。 因 
为 用 户 可 能 不 太 清 楚 可 以 在 Shares Owned 单元 格 上 执行 内 联 编辑 ， 所 以 可 在 
stock-table.html 文件 的 底部 添加 下 面 的 代码 : 

<div class="small text-center">Click on Shares Owned cell to edit.</div> 

完成 了 这 两 个 快速 的 修改 之 后 ， 请 花 一 点 时 间 测 试 这 个 内 联 编辑 功能 ， 具 体 的 样 例如 
图 1-11 所 示 。 尝 试 在 一 行 的 Shares Owned 单元 格 中 输入 任意 的 非 数 字 字符 ， 该 值 将 会 立 
即 被 重 置 。 不 过 ， 在 成 功 地 将 单元 格 内 容 修改 为 有 效 的 数字 之 后 ， 整 个 股票 表格 会 被 实时 
重新 计算 。 如 果 应 用 无 法 正常 工作 , 请 参考 本 章 附带 代码 中 的 step-8 目录 , 或 者 检查 GitHub 
仓库 中 对 应 的 标记 。 


StockDog Watchlists ~ 
四 Watchlists [+| 运 Hot tech stocks 
Symbol SharesOwned LastPrice Price Change($|%) MarketValue Day Change 

Pharmaceutical MSFT 100 44.14 +0.15 4414 15 
EE WR 1oo 499127 。 +1.3627 49912.700000000004 。 13627 
Financial 
YHOO 100 44.58 +0.15 4458 15 
NFLX 100 48648 +8.15 48648 815 
LNKD ”100 274.45 +45.45 27445 545 
AMZN 。 100 387.19 。 +1.82 38719 182 
Totals 。 1500 1735967 29347 
Click on Shares Owned cell to edit. 


图 1-11 
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1.11 步骤 9: 格式 化 货 


此 时 ，StockDog 的 监视 列表 视图 完全 可 以 正常 工作 了 。 可 以 使 用 它 创建 监视 列表 ， 可 
以 使 用 股票 表格 添加 、 删 除 和 编辑 股票 ， 但 是 现在 显示 数据 的 方式 并 不 理想 。 本 节 将 使 用 
Angular 内 置 的 currency 过 滤器 格式 化 所 显示 的 数字 ， 再 创建 一 个 新 的 指令 ， 用 于 根据 数 
值 的 正 负 改 变数 字 的 颜色 。 


1.11.1 创建 StkSignColor 指令 


首先 创建 一 个 新 的 stkSignColor 指令 ， 将 它 应 用 在 现 有 的 元 素 上 ， 从 而 将 元 素 的 显示 
颜色 改 为 红色 或 绿色 。 在 终端 中 运行 下 面 的 命令 ， 搭 建 该 指令 : 


yo angular:directive stk-Sign-Color 


该 命令 将 在 app/scripts/directives/ 目 录 中 创建 一 个 名 为 stk-sign-colorjs 的 新 文件 。 在 代 
码 清单 1-18 中 可 以 看 到 stkSignColor 指令 的 完整 实现 。 第 一 件 你 可 能 会 注意 到 的 事情 不 是 
$scope.$watch()， 而 是 使 用 $attrs.$observeO 监 听 赋 给 stkSignColor 的 表达 式 的 变化 [1]。 因 为 
S$observe() 是 $attrs 对 象 的 一 个 函数 ， 所 以 它 只 可 以 用 于 观察 /监视 DOM 特性 值 的 变化 ， 在 
本 例 中 这 正 是 我 们 所 希望 的 。 该 指令 的 其 余部 分 非常 简单 ， 因 为 所 有 它 需 要 做 的 就 是 根据 
表达 式 新 值 的 正 负 ， 更 新 $element 的 style.color 属性 [2]。 


代码 清单 1-18: app/scripts/directives/stk-sign-color.js 
"uss steict"y 


angular.module ('stockDogApp') 
.directive('stksSignColor', function () { 
return { 
restrict: 'A', 
link: function ($scope, $element, $attrs) { 
// [1] 使 用 $observe 监视 表达 式 的 变化 
$attrs.$observe('stkSignColor', function (newVal) { 
Var newSign = parseFloat (newVal); 
// [2] 根 据 符号 设置 元 素 的 style.color 值 
if (newSign > 0) { 


$element [0] .style.color = "Green' 7 
} else { 
$element [0] .style.color = 'Red'; 
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1.11.2 ”更 新 StockTable 模板 


除了 将 stkSignColor 指令 添加 到 stock-table.html 模板 中 ， 我 们 还 需要 使 用 Angular 的 
内 置 currency 过 滤器 。 不 过 对 Angular 过 滤器 的 深入 讨论 超出 了 本 章 的 范围 ， 现 在 所 有 需 
要 做 的 就 是 使 用 过 滤器 格式 化 显示 给 用 户 的 表达 式 的 值 。 过 滤器 可 以 用 在 视图 模板 、 控 制 
器 和 服务 中 ， 创 建 自己 的 自 定义 过 滤器 也 非常 直观 。 可 以 使 用 语法 {{ expression | filter }} 
在 视图 模板 的 表达 式 中 应 用 过 滤器 。 为 了 解 关 于 过 滤器 的 更 多 信息 ， 请 访问 官方 文档 
https://docs.angularjs.org/api/ng/filter。 本 节 将 使 用 的 是 currency 过 滤器 (采用 默认 的 参数 )。 
currency 过 滤器 的 完整 语法 如 下 所 示 : 


{{ currency expression | currency : symbol : fractionsize}} 


因为 symbol 值 默认 为 $，fractionSize 的 默认 值 是 当前 区 域 的 最 大 fraction 大 小 ， 所 以 
使 用 currency 过 滤器 非常 简单 。 在 watchlist.marketValue、watchlist.dayChange、stock.lastPrice ， 
stock.marketValue 和 stock.dayChange 表达 式 绑 定 中 添加 | currency。 然 后 将 stk-sign-color 特 
性 添加 到 你 希望 使 用 颜色 的 每 个 <td> 元 素 中 ， 并 将 它 绑 定 到 一 个 应 该 被 监视 的 值 。 在 本 例 
中 ， 我 们 希望 为 页 脚 中 的 watchlist.dayChange 单元 格 以 及 表格 中 的 PriceChange 和 Day 
Change 添加 颜色 。 下 面 是 一 个 在 页 脚 的 watchlist.dayChange 行 中 应 用 stk-sign-color 指令 的 
样 例 ， 


<td stk-sign-color="{f{watchlist.daychange}j}j"> 
{{watchlist.dayChange | currency}} 
</td> 


将 stk-sign-color 指令 应 用 到 剩余 的 两 个 单元 格 中 就 留 给 读者 作为 练习 。 一 旦 currency 
过 滤器 和 stk-sign-color 指令 就 绪 ， 该 应 用 看 起 来 应 该 如 图 1-12 所 示 。 如 果 发 现 自己 很 难 将 
指令 和 currency 过 滤器 应 用 在 标记 中 正确 的 位 置 ， 请 参考 本 章 附带 代码 中 的 step-9 目录 ， 
或 者 检查 GitHub 仓库 中 对 应 的 标记 。 


StockDog Watchlists ~ 
©® Watchlists [+| 后 Drugs & Money 加 
Technology Symbol Shares Owned Last Price PriceChange($|%) MarketValue 。 Day Change 
GD 200 $104.18 -02484 $20,836.32 ($49.68) 
PFE 200 $34.64 -002 $6,928.00 (84.00) 
Financial 
BMY 200 $61.45 +023 $12,290.00 C$46.00 
Gsk 200 $4790 +018 $9,580.00 $36.00 
VAX 200 $20071 +271 $40,142.00 $542.00 
AZN 200 $6894 -073 $13,788.00 2c($146.00) 
Totals 1200 $103,564.32 $424.32 
cick on Shares Owned cell to edit. 


图 1-12 
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1.12 ”步骤 10: 为 价格 变动 添加 动画 


在 本 节 , 将 学 习 如 何 使 用 Angular 的 ngAnimate 模块 在 StockDog 的 监视 列表 视图 中 执 
行动 画 的 基础 知识 。 为 了 通过 可 视 的 方式 向 用 户 展示 指定 股票 的 价格 操作 一 一 也 就 是 无 论 
值 变 成 了 正 值 还 是 负 值 一 -在 整个 单元 格 上 执行 红色 或 绿色 的 淡 入 淡出 动画 。 使 用 Angular 
创建 JavaScript 和 CSS3 动画 的 完整 讨论 超出 了 本 章 的 范围 , 可 以 访问 官方 文档 以 找到 更 多 
相关 信息 : https://docs.angularjs.org/api/ngAnimate。 

1.12.1 创建 StkSignFade 指令 


因为 目标 结果 是 为 整个 表格 单元 格 实现 淡 入 淡出 ， 所 以 需要 创建 男 一 个 指令 ， 将 它 用 
作 特性 ， 这 样 就 可 以 将 它 添加 到 现 有 的 元 素 中 。 首 先 在 终端 中 运行 下 面 的 命令 : 


yo angular:directive stk-Sign-Fade 


该 命令 将 在 app/scripts/directives/ 目 录 中 创建 一 个 新 的 stk-sign-fadejs 文件 。 正 如 你 在 
前 一 节 中 创建 的 stkSignColor 指令 一 样 ， 该 指令 非常 简短 和 直观 。 可 在 代码 清单 1-19 中 找 
到 stkSignFade 的 完整 实现 。 


代码 清单 1-19: app/scripts/directives/stk-sign-fade.js 
"ose Strict"s 


angular.module ('stockDogApp') 
.directive('stkSignFade', function ($animate) { 
return { 

Fostricet “NAN"; 

link: function ($scope, $element, $attrs) { 
var oldVal = null; 
// [1] 使 用 $observe 在 值 改变 时 发 出 通知 
$attrs.$observe('stkSignFade', function (newVal) { 

if (oldVal && oldVal == newVal) { return; } 


Var oldPrice = parseFloat (oldVal); 
Var newPrice = parseFloat (newVal); 
oldVal = newVal; 


// [2] 添 加 适当 的 方向 类 ， 然 后 移 除 它 
if (oldPrice && newPrice) { 
var direction = newPrice - oldPrice >= 0 ? 'up' : 'down'; 
$animate.addClass ($element, 'change-' + direction, function() { 
$animate.removeClass ($element, 'change-' + direction); 
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] 
nD; 


被 注入 到 该 指令 中 的 唯一 依赖 是 由 ngAnimate 模 块 提供 的 Sanimate 服 务 。 如 你 在 
stkSignColor 指 令 中 看 到 的 ， 这 里 再 次 使 用 $attrs.$observe() 函 数 监视 赋 给 stkSignFade 的 表达 
式 的 变化 [1]。 这 里 保存 了 一 个 oldVal 的 本 地 引用 , 这 样 接 下 来 发 生 改变 时 , 它 可 以 与 newVal 
相 比 较 ， 并 计算 出 合适 的 方向 类 [2]。 在 该 样 例 中 ，S$animate 服 务 被 用 于 向 指令 的 元 素 中 添 
加 change-up 或 change-down CSS 类 ， 然 后 再 快速 地 从 指令 的 元 素 中 移 除 change-up 或 
change-down CSS 类 。S$animate 服 务 将 接受 一 个 元 素 、 类 名 或 回调 函数 作为 参数 ， 尝 试 在 
stock-table html 文 件 中 使 用 该 指令 时 ， 必 须 使 用 Angular 要 求 的 语法 创建 一 些 CSS 类 。 在 
app/styles/main.css 文 件 的 顶部 添加 下 面 的 代码 行 。 这 里 还 包含 了 其 他 一 些 用 于 美化 股票 表 
格 显示 的 样式 : 


/* 股 票 表格 样式 */ 

.table { 
text-align: center; 
margin-bottom: Spx; 

} 

tfoot { 
font-weight: bold; 

} 

a 1{ 
cursor: pointer; 

} 

span[disabled="disabled"] a { 
text-decoration: none; 
color: black; 

} 

span[disabled="disabled"] { 
pointer-events: none; 

} 

/* ngAnimate 动画 样式 */ 

.change-up-add { 
transition: background-color linear 1.5s; 
background-color: green; 

. 

.change-up-add.change-up-add-active { 
background-color: white; 

} 

.change-down-add { 
transition: background-color linear 1.5s; 
background-color: red; 

.change-down-add.change-down-add-active { 
background-color: white; 

时 
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Angular 希 望 为 每 个 目标 动画 类 定义 *add 和 -add-active 类 。 在 之 前 的 样 例 中 ， 
change-up-add 立 即 被 应 用 了 ， 这 将 把 背景 色 设置 为 绿色 。 然 后 将 change-up-add-active 类 应 
用 在 了 动画 的 时 长 上 。 在 本 例 中 ， 它 将 把 背景 色 设置 为 白色 ， 并 使 用 1.5 秒 的 CSS 转 换 ， 
最 终 创 建 出 从 绿 变 白 的 淡 入 淡出 效果 。 相 同 的 方式 还 被 应 用 到 了 change-down-add 上 ， 它 将 
为 负 的 价格 操作 显示 红色 。 


1.12.2 更 新 StockTable 模板 


现在 我 们 完成 了 stkSignFade 指令 ， 并 且 创 建 了 ngAnimate 模块 期 望 的 适当 CSS 类 ， 
现在 该 修改 stock-table.html 视图 模板 了 。 定 位 到 包含 了 用 于 显示 watchlist.marketValue 和 
stock.lastPrice 的 <td> 元素 的 两 行 代 码 ， 并 分 别 向 其 中 添加 
stk-sign-fade=" { {watchlist.marketValue} }" 和 和 stk-sign-fade="{ {stock.lastPrice}}" 指 仿 。 


注意 : 

因为 QuoteService 从 Yahoo Finance 抓 取 数据 并 更 新 stock.lastPrice, 所 以 你 可 能 会 遇 到 
闭 市 的 情况 , 此 时 价格 不 会 发 生变 化 ,因此 使 你 很 难看 到 在 实际 中 stkSignFade 指令 的 效果 。 
在 本 例 中 ， 修 改 quote-servicejs 文件 中 的 函数 ， 随 机 化 stock.lastPrice。 可 以 通过 在 解析 
quote.LastTradePriceOnly 的 代码 行 中 添加 + _.random(-0.5, 0.5) 的 方式 使 用 Loadash 实现 。 只 
是 不 要 忘记 在 完成 测试 时 移 除 它 ! 


恭喜 ! 你 已 经 成 功 完成 了 StockDog 的 监视 列表 视图 ! 参见 图 1-13。 如 果 发 现 自己 的 
动画 无 法 正确 运行 ， 请 参考 本 章 附 带 代 码 中 的 step-10 目录 ， 或 者 检查 GitHub 仓库 中 对 应 
的 标记 。 


StockDog Watchlists ~ 


©® Watchllsts 运 Hottech stocks [+ | 
Symbol SharesOwned lastPrice 。 Prce Change($1%) MarketValue DayChange 
Pharmaceutical MSFT 100 2 +0.12 $4,411.00 $12.00 
TWTR 1000 0 +1.46 $50,010.00 $1,460.00 
Financial 
YHoo 100 +0.24 $4,467.00 $24.00 
NFLX 100 +7.37 $48,570.00 $737.00 
LNKD 100 $274.98 +5.98 $27,498.00 $598.00 


AMZN 100 sa +2.7085 $38,807.85 $270.85 
Toi Ea -…… 


Click on Shares Owned cell to edit 


图 1-13 
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1.13 ”步骤 11: 创建 仪表 盘 


StockDog 应 用 最 后 一 个 未 完成 的 特性 是 仪表 盘 视 图 。 该 视图 将 在 4 个 不 同 的 面板 中 聚 
合 所 有 已 创建 的 监视 列表 和 报告 分 析 的 绩效 指标 。 这些 性 能 指标 包括 : Total Market Value、 
Total Day Change、Market Value by Watchlist 和 Day Change by Watchlist。 因 为 没有 可 交互 
的 图 形 就 无 法 实现 仪表 盘 ， 所 以 将 使 用 Google Charts 库 泻 染 两 个 不 同 的 图 表 。 


1.13.1 更 新 仪表 盘 控 制 器 


为 在 AngularJS 应 用 中 使 用 Google Charts 库 ， 需 要 通过 指令 封装 和 公开 它 的 功能 。 出 
于 简单 的 目的 , 将 使 用 已 经 存在 的 库 来 完成 , 它 的 文档 位 于 https://github.com/bouil/angular- 
google-chart。 为 开始 使 用 angular-google-chart 库 , 可 在 终端 中 运行 下 面 的 命令 , 使 用 Bower 
安装 它 : 

bower install angular-google-chart -save 


该 命令 将 下 载 并 安装 该 库 。 该 命令 还 在 bowerjson 文件 中 把 库 列 为 了 项 目 依赖 。 一 旦 
该 命令 完成 ,我 们 必须 更 新 stockDogApp 模块 依赖 ,在 AngularJS 应 用 中 注册 该 库 的 模块 。 
也 可 以 通过 将 googlechart 添加 到 app/scripts/appjs 文件 中 依赖 数组 的 末尾 的 方式 实现 (与 之 
前 步骤 2 的 程序 清单 1-1 中 注册 AngularStrap 库 的 方式 相同 )。 完 成 该 步骤 后 ， 打 开 
app/scripts/controllers/ 目 录 中 的 dashboardjs 文件 ， 并 使 用 代码 清单 1-20 中 的 最 终 实 现 蔡 换 
它 的 内 容 。 


代码 清单 1-20: app/scripts/controllers/dashboard.js 


"use strict'; 


angular.module ('stockDogApp') 
.controller('DashboardCtrl', function ($scope, WatchlistSservice, 
QuoteService) { 
// [1] 初始 化 
Var unregisterHandlers = []; 
$scope.watchlists = WatchlistService.query(); 
$scope.cssstyle = 'height:300px;'; 
Var formatters = { 
number: [ 
{ 
columnNum: 1, 
Drofire "Sr" 
} 
] 
1; 


// [2] 辅 助 函数 : 更 新 图 表 对 象 


var updateCharts = function () { 


AngularJS 高 级 编程 


// 双 层 圆 环 图 
Var donutChart = { 
type: 'PieChart', 
displayed: true, 
data: [['Watchlist', 'Market Value']]， 
options: { 
title: 'Market Value by Watchlist', 
legend: 'none', 
pieHole: 0.4 
} v 
formatters: formatters 
}; 
// 柱 状 图 
var columnChart = { 
type: 'ColumnChart', 
displayed: true, 
data: [['Watchlist', 'Change', { role: 'style' }]], 
options: { 
title: 'Day Change by Watchlist', 
legend: 'none', 
animation: { 
duration: 1500, 
easing: 'linear’' 
} 
}, 
formatters: formatters 


}; 


// [3] 将 数据 推 入 图 表 对 象 

_-each($scope.watchlists, function (watchlist) { 
donutchart.data.push([watchlist.name, watchlist.marketVvalue]); 
columnChart .data.push([watchlist.name, watchlist.dayChange, 

watchlist.dayChange < 0 ? 'Red' : 'Green']); 

7); 

$scope.donutCchart = donutChart; 

$scope.columnChart = columnChart; 


] 7 


// [4] 用 于 重 置 控 制 器 状态 的 辅助 函数 
Var reset = function () { 
// [5] 在 注册 新 的 股票 之 前 清除 QuoteSservice 


QuoteService.clear(); 
_-each ($scope.watchlists, function (watchlist) { 


_-each (watchlist.stocks, function (stock) { 
QuoteService.register (Stock) 
3 
1); 


// [6] 在 创建 新 的 Swatch 监听 器 之 前 ， 注 销 现 有 $watch 监听 器 
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_-each (unregisterHandlers, function(unregister) { 
unregister(); 
Ws 
_-each ($scope.watchlists, function (watchlist) { 
Var unregister = $scope.$watch(function () { 
return watchlist.marketValue; 
}, function () { 
recalculate(); 
1); 
unregisterHandlers.push (unregister); 
DD); 
到 


// [7] 计算 新 的 total MarketValue 和 DayChange 
Var recalculate = function () { 
$scope.marketValue = 0; 
$scope.dayChange = 0; 
_-each($scope.watchlists, function (watchlist) { 
$scope.marketValue += watchlist.marketValue ? 
watchlist.marketVvalue : 0; 
$scope.dayChange += watchlist.dayChange ? 
watchlist.dayChange : 0; 
1); 
updateCharts (); 
Fe 


// [8] 监视 监视 列表 的 变化 
$scope.$watch('watchlists.length', function () { 
reset (); 
DD); 
DD); 


在 这 个 DashboardCtrl 实现 中 ,WatchlistService 和 QuoteService 都 被 作为 依赖 注入 到 了 


其 中 。 接 下 来 ,需要 做 一 些 初始 化 ， 使 用 WatchlistService 填充 $scope.watchlists 变量 ， 同 时 


定义 图 表 样式 和 格式 选项 [1]。 然 后 创建 updateCharts() 函 数 [2]， 用 于 创建 donutChart 和 
columnChart。 这 些 对 象 必需 的 属性 和 可 用 配置 选项 都 是 由 Google Chart 库 文档 定义 的 ， 网 
址 为 https://developers.google.com/chart/。 该 函数 还 将 循环 遍历 由 StockDog 追踪 的 每 个 监视 
列表 ， 并 在 把 两 个 图 表 结 构 附加 到 控制 器 的 $scope 之 前 ， 把 合适 的 数据 添加 到 各 自 的 图 表 
对 象 中 [3]。 接 下 来 定义 的 reset0 函 数 将 用 于 清除 控制 器 的 状态 。 该 函数 会 在 为 每 个 现 有 的 
监视 列表 注册 股票 之 前 ， 清 空 QuoteService 中 所 有 被 追踪 的 股票 [5]。 然 后 它 将 在 为 每 个 监 


视 列 表 的 marketValue 创建 新 的 Swatch 目标 之 前 ， 注 销 所 有 现 有 的 Swatch 监听 器 ， 


它们 的 


引用 被 存储 在 本 地 数组 中 [6]。 将 使 用 它们 调用 recalculate0 函 数 ， 而 该 函数 将 在 每 次 监视 列 


表 的 计算 值 改变 时 ， 计 算 新 的 聚合 市 值 和 每 日 变化 指标 。 


每 次 调用 recalculate 时 都 将 会 调用 updateCharts0， 通 过 Google Chart 库 使 用 最 新 的 数 


据 重新 绘制 现存 的 图 表 。 最 后 ， 将 在 watchlists length 属性 上 设置 一 个 Swatch 目标 ， 


从 而 使 


监视 列表 被 创建 或 删除 时 ， 触 发 reset0 函 数 ， 从 而 重新 正确 地 构建 整个 控制 器 的 状态 [8]。 
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值得 一 提 的 是 : 这 里 使 用 的 是 watchlists.length 表达 式 ， 而 不 是 整个 watchlists 对 象 ， 因 为 
深入 监视 大 型 数据 结构 可 能 引起 严重 的 应 用 性 能 降级 。 
1.13.2 更 新 仪表 盘 视 图 

现在 DashboardCtrl 实 现 已 经 完成 了 ， 接 下 来 要 做 的 是 更 新 StockDog 的 仪表 盘 视 图 ， 泻 
染 新 的 数据 和 已 经 创建 的 图 表 对 象 。 以 现状 来 说 ，app/views/dashboard.html 文 件 只 包含 一 


个 stkWatchlistPanel 指 令 的 引用 和 一 个 空白 的 Portfolio Overview 面 板 。 在 完整 的 仪表 盘 视 图 
中 可 以 找到 该 面板 的 缺失 标记 ， 如 代码 清单 1-21 所 示 。 


代码 清单 1-21: app/views/dashboard.html 


<div class="row"> 
<!-- 左 列 --> 
<div class="col-md-3"> 
<stk-watchlist-panel></stk-watchlist-panel> 
</div> 


<!-- 右 列 --> 
<div class="col-md-9"> 
<div class="panel panel-info"> 
<div class="panel-heading"> 
<span class="glyphicon glyphicon-globe"></span> 
Portfolio Overview 
</div> 
<div class="panel-body"> 
<!-- [1] 显 示 一 些 有 用 的 文本 ， 用 于 指导 新 的 用 户 --> 
<div ng-hide="watchlists.length && watchlists[0].stocks.length" 
class="jumbotron"> 
<hl>Unleash the hounds!</hl> 
<p> 
StockDog, your personal investment watchdog, is ready 
to be set loose on the financial markets! 
</p> 
<p>Create a watchlist and add some stocks to begin monitoring.</p> 
</div> 


<div ng-show="watchlists.length && watchlists[0] .stocks .length"> 
<!-- 顶 行 一 > 
<div class="row"> 
<!== 左 列 ==> 
<div class="col-md-6"> 
<!-- [2] 在 封装 元 素 上 使 用 sign-fade 指令 --> 
<div stk-sign-fade="{{marketValue}}" class="well"> 
<h2>{ {marketValue | currency}}</h2> 
<h5>Total Market Value</h5> 
</div> 
</div> 
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<! 一 - 右 列 --> 
<div class="col-md-6"> 
<!-- [3] 在 封装 元 素 上 使 用 sign-color 指令 --> 
<div class="well" stk-sign-color="{{dayChange}}"> 
<h2>{ {dayChange | currency}}</h2> 
<h5>Total Day Change</h5> 
</div> 
</div> 
</div> 
<!-- [4] 使 用 google-chart 指令 并 引用 图 表 对 象 --> 
<div class="row"> 
<!-- 左 列 --> 
<div class="col-md-6"> 
<div google-chart chart="donutChart" style= 
"{{cssstyle}}"></div> 
</div> 


<!-- 右 列 --> 
<div class="col-md-6"> 
<div google-chart chart="columnChart" style= 
"{{cssstyle}}"></div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 


panel-body 中 的 新 标记 首先 包含 了 一 些 有 用 的 文本 , 用 于 指导 第 一 次 打开 StockDog 并 
且 尚 未 创建 任何 监视 列表 的 新 用 户 [1]。 还 要 注意 ， 顶 行 的 两 列 都 包含 了 stkSignFade[2] 和 
stkSignColor[3] 指 令 的 引用 ,但 是 这 些 指令 已 经 被 应 用 到 了 封装 元 素 上 一 一 在 本 例 中 为 
Bootstrapwell。 最 后 ， 在 底 行 的 两 个 列 中 使 用 之 前 安装 的 angular-google-chart 库 所 公开 的 
googleChart 指令 ， 并 将 DashboardCtrl 中 创建 的 图 表 对 象 用 作 每 个 元 素 chart 特性 的 值 。 为 
了 美化 完整 的 仪表 盘 视 图 , 唯一 剩 下 所 需 做 出 的 修改 就 是 在 app/styles/main.css 文件 的 顶部 
添加 下 面 的 CSS: 

/* 仪表 盘 视 图 样式 */ 

-Well { 

background-color: white; 


text-align: center; 
} 


恭喜 ! 如 果 已 经 成 功 地 学 习 了 本 节 的 全 部 内 容 , 那么 最 终 就 完成 了 整个 SotckDog 应 用 
的 构建 ! 参见 图 1-14。 请 花 一 点 时 间 欣 赏 你 的 辛苦 工作 ， 并 创建 几 个 新 的 监视 列表 、 添 加 
新 的 股票 、 从 仪表 盘 视 图 中 监视 投资 组 合 的 绩效 。 对 于 完整 的 应 用 源 代码 ， 请 参考 本 章 附 
带 代码 中 的 step-11 目录 ， 或 检查 GitHub 仓库 中 对 应 的 标记 。 
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StockDog Dashboard 
® Watchlists @ Portfolio Overview 
Technology 
Pharmaceutical $1,359.65 
Total Day Change 
Financial 
Energy 
Market Value by watchlist Day Change by Watchlist 
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0 
1500 
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maceutca Energy 


图 1-14 


1.14 ”生产 环境 部 署 


现在 我 们 已 经 完成 了 StockDog 的 构建 ， 接 下 来 要 做 的 就 是 在 部 署 到 Internet 之 前 把 它 
打包 成 可 发 布 的 应 用 ， 从 而 使 全 世界 的 用 户 可 以 更 好 地 管理 自己 的 投资 组 合 。 尽 管 对 生产 
环境 部 署 的 深入 讨论 和 所 有 相关 的 复杂 内 容 超出 了 本 节 的 范围 ， 但 是 可 以 先 完成 一 些 简 单 


的 任务 ， 使 该 应 用 


可 以 面向 用 户 。 


因为 我 们 使 用 AngularJS 


Yeoman 生成 器 开发 应 用 , 所 以 该 项 目 中 已 经 包含 了 一 个 复杂 


的 构建 系统 。 克 


E 第 3 章 “ 架 构 ” 中 将 讲解 更 多 关于 该 系统 如 何 工 作 的 内 容 ， 但 是 对 于 现在 


来 说 ， 只 需要 在 终端 中 运行 1 


下 面 的 命令 运行 构建 系统 即 可 : 


grunt build 


该 命令 将 连接 、 混 淆 和 缩小 StockDog 的 所 有 源 代码 ， 并 使 用 优化 后 的 资产 在 项 目的 根 
目录 中 创建 一 个 新 的 dist/ 目 录 。 目录 dist/ 中 包含 了 用 户 运 行 应 用 所 需 的 所 有 代码 ， 所 以 部 署 
非常 简单 ， 只 需要 将 该 文件 夹 上 传 到 所 选择 的 托管 服务 中 。 不 过 ， 对 于 本 节 来 说 ， 将 把 
StockDog 部 署 到 GitHub ”Pages 一 一 一 个 为 基于 GitHub 的 项 目 所 提供 的 免费 托管 服务 。 如 果 
尚未 上 传 自己 的 项 目 到 GitHub， 那 么 请 花 上 一 点 时 间 完 成 。 如 果 需 要 任何 进一步 的 协助 ， 请 
咨询 https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/。 

一 旦 项 目 被 上 传 到 了 GitHub, 请 打开 .gitignore 文件 , 并 移 除 包含 dist 的 行 。 除 此 之 外 ， 
Yeoman 在 创建 项 目 时 已 经 遵守 了 最 佳 实践 ， 忽 略 了 由 自动 构建 任务 生成 的 文件 。 不 过 ， 
因为 将 在 GitHub 上 托管 自己 的 dist/ 目 录 ， 所 以 它 必 须 作为 项 目的 一 部 分 提交 。 请 继续 将 
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dist/ 目 录 添 加 到 仓库 中 、 提 交 ， 然后 将 它 推送 到 上 游 系 统 。 现 在 就 可 以 使 用 git subtree 命令 
将 应 用 部 署 到 GitHub 了 。 请 在 终端 中 运行 下 面 的 命令 ， 为 项 目 创建 一 个 新 的 gh-pages 分 
支 ， 它 由 dist/ 目 录 中 的 所 有 文件 组 成 : 


git subtree push --prefix dist origin gh-pages 


该 命令 完成 之 后 ， 就 可 以 通过 网 址 http(s)://<username>.github.io/<projectname> 公 开 访 
问 应 用 了 。 例 如 ， 你 会 发 现 StockDog 应 用 运行 在 http://diegonetto.github.io/stock-dog 上 。 


以 <projectname> 为 前 级 。 另 一 种 方式 是 通过 在 dist/ 目 录 中 上 传 一 个 包含 了 自 定义 域 的 新 
CNAME 文件 ， 为 项 目 创建 一 个 自 定义 URL。http://www.stockdog.io/ 就 是 通过 这 种 方式 指 
向 http://diegonetto.github.io/stock-dog 的 。 在 上 传 了 CNAME 文件 ， 并 使 用 之 前 展示 的 git 
subtree 命令 重新 部 署 站 点 后 , 所 有 剩 下 的 任务 就 是 修改 DNS 提供 者 的 www CANME 记录 
(假设 你 希望 使 用 www 子 域 ) 指 向 username.github.io 了 。 如果 已 经 成 功 完成 了 这 些 步 又 , 那 
么 恭喜 你 ! 你 的 应 用 应 该 已 经 上 线 并 且 可 以 与 世界 上 的 其 他 人 分 享 了 。 


注意 : 

在 为 托管 项 目 页 面 配置 自 定义 URL 时 ，GitHub 推荐 使 用 子 域 而 不 是 apex 域 。 如果 希 
望 为 部 署 的 应 用 使 用 apex 域 (在 本 例 中 就 是 http://www.stockdog.io/)， 那 么 完成 这 个 任务 的 
最 佳 方式 就 是 按照 之 前 描述 的 方式 使 用 DNS 提供 者 的 www 子 域 CNAME DNS 条 目 ， 然 
后 启用 从 apex 域 到 你 的 www URL 的 域 转发 。 在 本 例 中 ， 已 经 将 http://stockdogio 设置 为 
转发 至 http://www.stockdog.io。 


1.15 ”小结 


本 章 讲解 的 内 容 通过 构建 StockDog 应 用 , 向 你 展示 了 一 个 真实 世界 中 的 AngualrJS 应 
用 ， 该 应 用 几乎 用 到 所 有 AnguarJS 的 关键 组 件 。 从 使 用 Yeoman AngularJS 生成 器 搭建 项 
目 架构 ， 到 使 用 GitHub Pages 部 署 应 用 ， 这 个 分 布 指南 应 该 为 你 提供 了 信心 和 满足 感 ， 让 
你 勇于 深入 学 习 这 个 优雅 的 框架 。 与 此 同时 ， 本 章 还 讲解 了 如 何 构建 一 个 多 视图 单 页 面 应 
用 ; 创建 几 个 控制 器 、 指 令 和 服务 ; 安装 额外 的 前 端 模块 ; 处 理 动态 表单 验证 ; 与 外 部 API 
通信 ; 使 用 简单 的 动画 让 应 用 变 得 生动 。 在 本 书 接 下 来 的 章节 中 ， 将 学 习 AngualrJS 框架 
中 各 种 组 件 如 何 工作 的 细节 ， 并 了 解 各 种 不 同 的 工具 、 服 务 和 技术 ， 通 过 使 用 它们 可 以 为 
专业 消费 创建 健壮 的 、 可 靠 的 和 可 维护 的 项 目 。 
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本 章 内 容 : 
e 用 Bower 管理 前 端 依赖 


用 Grunt/Gulp 自动 完成 开发 任务 
使 用 Yeoman 搭建 新 的 项 目 
使 用 工作 流 最 佳 实践 提高 工作 效率 


本 章 的 样 例 代 码 下 载 : 
可 以 在 http://www.wrox.com/go/proangularjs 页 面 和 
wrox.com 代码 下 载 文 件 。 


2.1 工具 的 作用 


两 个 词 :优化 和 自动 化 。 因 为 在 生产 力 中 时 间 是 一 


的 Download Code 选项 卡 找到 本 章 的 


个 关键 因素 ， 所 以 自动 完成 重复 的 


任务 可 以 使 开发 者 保持 高 效率 。 本章 将 讲解 一 些 开源 工具 , 它们 可 以 帮助 加 快 开发 、 调 试 、 


测试 和 发 布 应 用 的 速度 。 通 过 将 “不 要 重复 自己 (DRY)” 的 哲学 扩展 到 工作 流 过 程 中 ， 可 
以 将 自己 的 更 多 精力 关注 于 自己 喜欢 做 的 事情 : 构建 优雅 的 、 严 密 的 代码 。 在 了 解 如 何 智 
地 应 用 现代 技术 增强 工作 流 之 后 ， 将 创建 一 个 坚实 的 基础 ， 用 于 支持 构建 样 例 应 用 ， 而 


通过 该 应 用 将 对 AngularJS 进行 深入 学 习 。 
注意 : 


本 章 涉及 的 所 有 工具 都 要 求 必须 在 个 人 机 器 中 安装 Node.js。 关 于 更 多 相关 信息 , 请 访 


问 http:/www.nodejs.org， 并 执行 相应 平台 的 安装 指令 
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2.2 Bower 


Bower 由 Twitter 创建 ， 它 是 一 个 “Web 的 包 管 理 器 ”， 为 前 端 包 管理 问题 提供 了 一 个 优 
雅 的 、 灵 活 的 解决 方案 。 通 过 发 布 为 一 个 Node js 命令 行 工具 ， 它 将 通过 提供 与 包 无 关 的 机 
制 (用 于 搜索 、 安 装 和 更 新 第 三 方 文件 )， 帮 助 管理 前 端 JavaScript 依 赖 。 

2.2.1 开始 使 用 Bower 

Bower 的 管理 工具 是 通过 操作 Git( 1.3X 之 后 的 版 本 开始 支持 SVN) 来 获取 和 安装 包 
的 ， 所 以 请 保证 已 经 在 系统 上 安装 了 Git。Mac 用 户 在 自己 的 机 器 上 应 该 已 经 有 了 可 用 的 
Git。 对 于 Windows 用 户 ， 推 荐 下 载 Git Bash(http://git-scm.com/downloads)。 

为 了 开始 使 用 Bower, 请 使 用 Node Package Manager(npm) 工 具 (包含 在 Nodejs 中 ) 将 它 
安装 到 全 局 的 位 置 。 启 动 所 选择 的 终端 应 用 ， 并 运行 下 面 的 命令 : 


npm install -g bower 


运行 该 命令 后 ， 就 可 以 通过 命令 行使 用 Bower 工具 。 在 详细 查看 如 何 使 用 这 些 命令 管 
理 前 端 依赖 之 前 ， 请 运行 bower help 查看 它 支持 的 命令 列表 。 


2.2.2 ”搜索 包 
Bower 维护 了 一 个 包含 大 量 JavaScript 库 的 注册 表 ， 可 以 轻松 地 通过 bower search 
[<package>] 命 令 或 者 访问 http://bower.io/search/ 搜 索 这 些 库 。 在 命令 行 中 运行 下 面 的 命令 : 
bower search angular 


该 命令 将 列 出 所 有 通过 Bower 可 以 获得 的 AngularJS 库 。 因 为 所 有 人 都 能 在 注册 表 中 
创建 和 发 布 新 的 包 ， 所 以 可 以 使 用 Bower 管理 大 多 数 (如 果 不 是 所 有 的 话 ) 的 第 三 方 依赖 。 


2.2.3 安装 包 


使 用 Bower 安装 包 非 常 简单 ， 只 需要 运行 bower install <package> 即 可 。 因 为 Bower 
的 目标 是 变 成 与 包 无 关 的 ， 所 以 <package> 可 能 是 映射 到 已 注册 的 Bower 包 、 公 开 或 私有 
的 Git 或 者 Subversion 仓库 、 本 地 目录 甚至 是 文件 的 统一 资源 定位 符 (URL) 的 名 字 。 对 于 所 
支持 的 <package> 的 完整 列表 ， 请 访问 http://bower.io/。 现 在 ， 将 开始 创建 一 个 新 的 样 例 。 
首先 创建 一 个 新 目录 ， 然 后 运行 下 面 的 命令 安装 最 新 稳定 版 本 的 AngularJS: 


bower install angular 


注意 , Bower 在 下 载 和 安装 AngularJS 库 的 位 置 创建 了 一 个 本 地 目录 bower_components。 
在 继续 开发 这 个 简单 的 应 用 之 前 ， 请 查看 如 何 通 过 追踪 依赖 的 版 本 锁定 它们 。 

注意 : 

如 果 想 修改 Bower 安装 包 的 位 置 ， 请 创建 一 个 bowerrc 文件 ， 并 设置 如 下 所 示 的 目录 
属性 : 
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{ 
"directory": "app/bower components" 
} 


关于 Bower 支持 的 所 有 配置 属性 的 完整 列表 ， 请 访问 http://bower.io/#configuration。 


2.2.4 版 本 化 依赖 


为 了 更 好 地 追踪 第 三 方 依赖 ， 可 以 创建 一 个 bowerjson 文件 ， 在 其 中 包含 所 需 库 的 名 
字 和 版 本 。 它 的 工作 方式 非常 类 似 于 Node 的 packagejson 文件 和 Ruby 的 Gemfile。 因 为 
Bower 使 用 Nodejs 的 语义 版 本 化 系统 (http://semver.org)， 所 以 在 指定 项 目 依赖 时 可 以 创建 
复杂 的 范围 ， 如 文档 网 站 https://github.com/npm/node-semver 所 描述 的 。Bower 提供 了 一 个 
交互 式 命令 行 ， 其 中 包含 了 生成 默认 文件 的 提示 。 在 项 目的 根 目录 中 简单 地 运行 下 面 的 
命令 : 


bower init 


现在 我 们 就 得 到 了 一 个 基本 的 bowerjson 文件 ， 接 下 来 可 以 将 AngularJS 添加 为 一 个 
依赖 ， 并 运行 下 面 的 命令 使 用 最 新 版 本 (--force-latest -F) 更 新 文件 (--save , -S): 


bower install -SF angular 


注意 : 

Bower 可 以 使 用 <package>#<version> 语 法 安装 指定 的 版 本 。 要 获得 指定 包 所 有 可 用 版 
本 的 列表 , 请 运行 bower info <package>。 如 果 希 望 看 到 更 多 包 安 装 选项 , 请 运行 命令 bower 
help install。 

如 果 不 希 望 签 入 第 三 方 库 ， 那 么 你 的 版 本 系统 可 以 追踪 该 文件 ， 所 有 列 出 的 依赖 接 下 
来 都 可 以 通过 运行 bower install 进行 安装 。 尽管 这 是 一 个 选择 的 问题 , 但 推荐 你 遵守 Bower 
主页 列 出 的 最 佳 实践 建议 :“ 对 于 正在 创建 的 包 ， 如 果 并 未 计划 让 其 他 项 目 使 用 (例如 ， 正 
在 构建 一 个 Web 应 用 )， 那 么 你 总 是 应 该 将 安装 包 签 入 源 控制 系统 中 。” 


2.3 Grunt 


Grunt 是 一 个 任务 运行 器 ， 它 将 帮助 自动 完成 重复 的 工作 ， 例 如 linting、 编 译 、 缩 小 、 
测试 、 文 档 和 部 署 。 它 是 JavaScript 中 的 Rake、Cake、Make 和 Ant 替代 物 。 它 被 打包 为 
Nodejs 命令 行 工具 ， 并 且 获 得 了 一 个 充满 生机 的 插件 生态 系统 的 支持 ，Grunt 可 以 通过 自 
动 化 大 部 分 的 普通 工作 增强 工作 流 ， 允 许 你 专注 于 应 用 的 构建 。 

2.3.1 开始 使 用 Grunt 


使 用 Grunt 自动 化 工作 流 的 第 一 件 事情 就 是 将 命令 行 工具 安装 在 机 器 的 全 局 位 置 。 为 
使 grunt 工具 可 用 ， 请 运行 下 面 的 命令 : 


npm install -9 grunt-cli 
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接 下 来 ， 需 要 一 些 用 于 实验 的 样 例文 件 。 使 用 自己 最 喜欢 的 编辑 器 ， 创 建 如 代码 清单 


2-1 所 示 的 index.html。 为 保持 应 用 资产 组 织 在 一 个 中 心 位 置 ， 将 它们 放 到 新 目录 app/ 中 。 
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代码 清单 2-1: app/index.html 


<!DOCTYPE html> 
<html ng-app="Workflow"> 
<head> 
<link rel="stylesheet" href="main.css"> 
</head> 


<body ng-controller="ToolsCtrl"> 
<hl>Workflow tools from this chapter:</hl> 


<ul> 
<1i ng-repeat="tool in tools">{{tool}}</1i> 
</ul> 


<script src="bower components/angular/angular.js"></script> 
<script src="app.js"></script> 
</body> 
</html> 


注意 : 

之 前 曾 提 到 过 , 可 使 用 一 个 .bowerrc 文件 设置 Bower 安装 模块 文件 的 位 置 . 对 于 Grunt 
工作 流 样 例 而 言 ， 可 创建 一 个 .bowerrc 文件 ， 并 设置 directory 属性 ， 将 Bower 模块 安装 在 
新 的 app/ 目 录 中 : 

. 

"directory": "app/bower components" 

. 

项 目 根 目录 中 的 bower_components/ 目 录 现 在 可 以 删 掉 了 。 重 新 运行 bower install， 在 
app/ 中 创建 一 个 新 的 bower_components/ 目 录 。 


为 让 样 例 变 得 有 趣 ， 创 建 一 个 如 代码 清单 2-2 所 示 的 Less 样式 表 ， 不 过 我 们 也 可 以 选 
用 Sass， 这 是 另 一 种 CSS 预 处 理 器 。 


代码 清单 2-2: app/main.less 


html， 
body { 
hl { 
color: SteelBlue; 
} 
} 
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最 后 ， 需 要 创建 一 个 基本 的 AngularJS 应 用 ， 如 代码 清单 2-3 所 示 ， 使 用 单个 控制 器 
在 index.html 页 面 中 显示 本 章 涵盖 的 工具 列表 。 


代码 清单 2-3: app/app.js 
voide striet"s 
angular.module ('Workflow', []) 


.controller('ToolsCtrl', function($scope) { 
$scope.tools = [ 
'Bower', 
'Grunt', 
"Yeoman '" 
] 7 
}); 
需要 为 该 项 目 做 的 最 后 一 件 事 就 是 创建 一 个 packagejson 文件 ， 在 其 中 保存 一 个 开发 
依赖 的 列表 。 可 以 在 项 目 根 目录 中 运行 下 面 的 命令 ， 通 过 交互 方式 完成 : 


npm init 


简单 地 按照 提示 进行 ， 将 创建 出 一 个 基本 的 包 文 件 。 现 在 一 些 基 本 的 资产 已 经 有 了 ， 
那么 接 下 来 就 可 以 安装 一 些 插件 ， 并 开始 构造 用 于 增强 开发 工作 流 的 第 一 个 Gruntfilejs。 


2.3.2 ”安装 插件 


在 当前 的 配置 中 ， 我 们 必须 手动 地 将 Less 文件 编译 成 main.css， 并 在 文件 被 修改 时 使 
用 浏览 器 重新 打开 index.html。 对 于 现在 这 个 简单 的 应 用 来 说 ， 这 似乎 不 是 一 个 粳 糕 的 任 
务 , 但 是 随 着 它 变 得 越 来 越 复杂 ， 这 种 手动 工作 将 迅速 变 得 乏味 。 为 自动 完成 整个 过 程 ， 
需要 使 用 一 些 插件 。 请 运行 下 面 的 命令 行 ， 将 插件 安装 为 项 目的 开发 依赖 : 

npm install --save-dev grunt 

npm install --save-dev load-grunt-tasks 

npm install --save-dev grunt-contrib-connect 

npm install --save-dev grunt-contrib-jshint 


npm install --save-dev grunt-contrib-less 
npm install --save-dev grunt-contrib-watch 


如 果 现 在 查看 package.json 文件 的 内 容 , 它 应 该 包含 了 所 有 在 devDependencies 属性 中 
安装 的 Grunt 插件 。 


注意 : 
正式 维护 插件 的 Grunt 核心 开发 者 在 名 字 中 都 包含 了 contrib。 
2.3.3 ”目录 结构 
在 创建 第 一 个 Gruntfile 之 前 ， 请 浏览 当前 的 目录 结构 ， 并 保证 你 并 未 缺失 任何 应 用 文 
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件 、Grunt 插件 和 Bower 依赖 。 在 完成 该 检查 之 后 , ， 现 在 的 文件 系统 结构 应 该 如 下 所 示 : 


root-folder/ 

HE package.json 

FE bower.json 

上 一 .bowerrc 

app/ 

| oo index.html 

| 上 一 main.less 

| 二 一 apps 

| 上 一 一 bower components/ 

| 一 angular/ 

上 一 一 node modules/ 

ioe grunt/ 

| Coo— grunt-contrib-connect/ 
| Coo grunt-contrib-jshint/ 
| CoC grunt-contrib-less/ 
iC5oeCo grunt-contrib-watch/ 
| Coo— load-grunt-tasks/ 


刚刚 安装 的 Grunt 插件 都 被 包含 在 node_modules/ 文 件 夹 中 。 因 为 我 们 使 用 .bowerre 文 
件 对 Bower 进行 了 配置 ， 所 以 它 将 把 Angularjs 模块 资产 安装 到 app/ 目 录 中 。 如 果 目 录 结 
构 与 此 不 符 ， 那 么 请 花 一 点 时 间 检 查 2.3.1 节 “ 开 始 使 用 Grunt”。 在 配置 第 一 个 Gruntfile 
时 ， 将 使 用 这 样 的 目录 结构 。 

2.3.4 Gruntfile 
Gruntfilejs 在 项 目的 根 目录 中 ， 它 是 package.json 的 兄弟 文件 ， 并 且 应 该 随 着 其 他 源 


代码 一 起 提交 。 请 从 头 创建 一 个 如 代码 清单 2-4 所 示 的 简单 主干 代码 ， 来 查看 Gruntfile 的 
各 种 组 件 。 


代码 清单 2-4: 主干 Gruntfile.js 
// [1] 封装 器 函数 


module .exports = function(grunt) { 


// [2] 项目 和 任务 配置 
grunt .initConfig({ 

pkg: grunt.file.readJSON('package.json') 
]) 


// [3] 自动 加 载 所 有 插件 任务 
require('load-grunt-tasks') (grunt); 


// [4] 默 认 任务 
grunt.registerTask('default', []); 
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代码 清单 2-4 所 示 的 Gruntfile 文件 的 4 个 主要 部 分 都 使 用 注释 进行 了 注解 。 所 有 的 
Grunt 代码 都 必须 在 [1] 中 (封装 器 函数 )。 项 目 和 任务 配置 属性 都 将 被 传 入 到 [2] 中 
(grunt.initConfig0) 方 法 )。 为 了 配置 已 安装 插件 提供 的 任务 ， 我 们 必须 显 式 地 让 Grunt 加 载 
所 有 插件 的 任务 [3]。 最 后 ， 可 以 注册 自 定义 任务 ， 用 于 执行 预定 义 任务 的 组 合 。 在 命令 行 
中 运行 grunt 时 ，Grunt 将 执行 default 任务 。 


注意 : 

已 安装 的 load-grunt-tasks 插件 将 负责 加 载 package.json 文 件 中 定义 的 每 个 Grunt 插件 的 
所 有 任务 。 没 有 它 ， 你 就 不 得 不 手动 加 载 插件 ， 如 下 所 示 : 

grunt .loadNpmTasks ('grunt-contrib-connect'); 


使 用 该 插件 将 节省 一 些 代码 ， 尤 其 是 当 Gruntfile 依赖 的 插件 数量 增加 时 。 
2.3.5 配置 任务 和 目标 


现在 我 们 已 经 创建 了 Gruntfile 的 主干 ， 并 了 解 了 它 的 基本 结构 ， 那 么 接 下 来 就 可 以 配 
置 Grunt 任务 和 目标 了 。 无 论 何 时 运行 任务 ，Grunt 都 将 在 同名 的 属性 中 搜索 它 的 配置 。 任 
务 可 以 有 多 个 目标 ， 每 个 目标 可 以 有 自己 的 配置 选项 。 在 本 节 ， 将 配置 由 之 前 所 安装 的 4 
个 特定 插件 提供 的 任务 ， 检 查 它 们 如 何 一 起 自动 执行 一 个 简单 的 工作 流 。 


1. Connect 任务 


被 安装 为 开发 依赖 的 grunt-contrib-connect 插件 公开 了 一 个 connect 任务 ， 它 可 以 在 
Gruntfile 中 进行 配置 。 该 插件 允许 启动 一 个 轻 量 级 的 Nodejs 服务 器 作为 工作 流 的 一 部 分 ， 
用 于 支持 应 用 资产 。 修 改 Gruntfile， 在 grunt.initConfig 方法 中 添加 下 面 的 内 容 : 


// 配置 来 自 于 'grunt-contrib-connect' 的 'connect' 任 务 
connect: 1{ 

// [1] 任 务 选项 ， 窗 盖 内 置 的 默认 值 

options: { 

port: 9000, 

open: true, 

livereload: 35729, 

hostname: "1ocalhost" 


}, 
// [2] 任意 指定 目标 
development: { 
// 目标 选项 ， 覆 盖 任 务 选 项 
options: { 
middleware: function(connect) { 
return [ 
connect.static('app') 
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配置 Grunt 插件 非常 简单 ， 只 需 在 传 给 gruntinitConfig() 方 法 的 JavaScript 对 象 中 添加 
一 个 匹配 插件 名 称 的 新 属性 即 可 。 在 每 个 任务 配置 中 ， 可 以 指定 一 个 选项 对 象 ， 用 于 覆盖 
插件 提供 的 内 置 默 认 值 。 在 本 例 中 ， 将 把 服务 器 设置 为 运行 在 http://localhost:9000/ 上 ， 并 
在 端口 35729 上 运行 独立 的 connect-livereload 服务 器 ， 把 livereload 脚本 标记 注入 页 面 中 ， 
运行 时 请 求 默认 的 浏览 器 打开 一 个 新 的 选项 卡 。 


注意 : 

connect 是 由 Sencha Labs 为 Node.js 创建 的 一 个 中 间 件 框架 ， 它 有 着 丰富 的 捆绑 插件 
和 第 三 方 插件 (http://www.senchalabs.org/connect/)。 

除了 使 用 connect 框架 支持 文件 ， 已 安装 的 grunt-contrib-connect 插件 将 使 用 一 个 称 为 
connect-livereload 的 中 间 件 插件 ， 在 服务 器 响应 过 程 中 把 <script> 标 记 注 入 页 面 中 。 这 是 创 
建 livereload 的 第 一 步 ， 当 修改 应 用 的 资产 时 ， 通 过 它 你 的 Web 页 面 将 进行 实时 更 新 ， 而 
不 必 手 动 干预 。 下 一 步骤 将 在 稍 后 (讲解 grunt-contrib-watch 插件 配置 时 ) 进 行 讨论 。 


下 一 件 要 做 的 事情 是 : 为 connect 任 务 配置 一 个 新 的 目标 (任意 名 称 )[2]。 因 为 应 用 文件 
都 驻 留 在 app/ 目 录 中 ， 所 以 需要 告诉 自己 的 development 目 标 从 该 位 置 提供 静态 资产 。 将 通 
过 设置 目标 options 对 象 的 middleware 属 性 来 实现 ， 该 属性 将 返回 一 个 对 connect.static('app') 
的 调用 (如 之 前 所 看 到 的 ， 该 调用 被 封装 在 一 个 数组 中 )。 尽 管 该 样 例 并 未 演示 ， 但 要 注意 : 
目标 级 别 的 选项 将 覆盖 任务 级 别 的 选项 。 

现在 我 们 已 经 成 功 配置 了 connection 任务 ， 并 使 用 一 些 选项 配置 了 development 目标 ， 
接 下 来 就 可 以 运行 本 地 开发 服务 器 ， 并 在 新 的 浏览 器 选项 卡 中 打开 应 用 ， 请 运行 下 面 的 
命令 : 


grunt connect:development:keepalive 


在 命令 行 中 执行 Grunt 任务 的 语法 如 这 里 展示 的 taskName:targetName:args 模式 所 示 。 
可 以 指定 多 个 参数 ， 但 是 必须 使 用 分 号 将 它们 分 隔 开 。 为 了 保持 连接 运行 中 的 服务 器 ， 将 
向 connect 任务 中 传 入 keepalive 参数 。 关 于 所 支持 的 配置 选项 和 参数 的 完整 列表 ， 请 访问 
文档 https://github.com/gruntjs/grunt-contrib-connect。 


2. Less 任务 


现在 我 们 已 经 有 了 一 个 轻 量 级 的 Web 服务 器 可 以 提供 静态 文件 的 访问 , 接 下 来 要 学 习 
的 是 如 何 为 Less 文件 创建 一 个 编译 任务 。 如 果 一 直 都 按照 书 中 的 步骤 进行 ,那么 你 应 该 已 
经 注意 到 了 : 仅 有 的 样式 都 定义 在 main .less 中 。 不 过 ， 因 为 index.html 引用 了 main.css， 
而 该 文件 尚 不 存在 ， 所 以 没有 样式 会 被 应 用 到 样 例 应 用 中 。 通 常 ， 需 要 安装 Less 命令 行 编 
译 器 ， 并 在 每 次 对 样式 做 出 修改 时 调用 它 ， 如 下 所 示 : 


npm install -g less 
lessc app/main.less > app/main.css 


不 过 ， 之 前 安装 的 grunt-contrib-less 插件 公开 一 个 less 任务 ， 通 过 它 可 以 配置 并 自动 
执行 编译 过 程 。 修 改 Gruntfile， 在 connect 任务 配置 之 后 添加 下 面 的 代码 行 : 
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// 配置 来 自 于 'grunt-contrib-less' 的 'less' 任 务 
less: { 
development: { 
filess: { 
'app/main.css': 'app/main.less' 
} 
} 
} 


这 里 , 我 们 在 Less 任务 的 development 目标 的 files 属性 中 指定 了 main.less 到 main.css 
的 转换 信息 。 为 触发 该 任务 ， 请 按 之 前 描述 的 模式 运行 下 面 的 命令 行 : 


grunt less 


该 命令 已 经 在 app/ 目 录 中 创建 了 main.css 文件 。 尽管 现在 Less 编译 任务 已 经 得 到 了 正 
确 的 配置 ， 但 我 们 仍 需 在 每 次 对 main.less 文件 做 出 修改 时 运行 grunt less 命令 。 接 下 来 将 
学 习 如 何 使 用 grunt-contrib-watch 插件 自动 执行 该 任务 。 对 于 Less 任务 可 用 配置 选项 的 完 
整 列表 ， 请 访问 插件 文档 页 面 : https://github.com/gruntjs/grunt-contrib-less。 


3. JSHint 任务 


JSHint 是 一 个 开源 静态 代码 分 析 工 具 ， 它 可 以 检测 JavaScript 代码 中 的 错误 和 潜在 问 
题 ， 并 帮助 增强 编码 规范 。 静 态 分 析 的 过 程 通常 被 称 为 linting， 它 应 该 被 看 成 所 有 工作 流 
和 构建 系统 不 可 分 割 的 一 部 分 。 已 安装 的 grunt-contrib-jshint 插件 公开 了 一 个 可 配置 的 
JSHint 任务 , 它 可 以 作为 Grunt 工作 流 系统 的 一 部 分 进行 自动 化 ,在 Gruntfile 文件 中 的 Less 
任务 之 后 添加 下 面 的 代码 ， 用 于 对 JavaScript 文件 执行 Lint 操作 : 


// 配置 来 自 'grunt-contrib-jshint' 的 'jshint' 任 务 
jshint: { 
options: { 
jshintrc: '.jshintrc' 
}, 
all: [ 
'Gruntfile.js', 
'app/*.js' 
] 


这 里 使 用 任务 级 别 选项 配置 JSHint 任务 ， 将 寻找 一 个 jshintrc 文件 (通过 它 可 以 自 定义 
JSHint) 和 一 个 称 为 all 的 目标 ， 用 于 指定 希望 lint 的 JavaScript 文件 。 除 了 显 式 地 引用 每 个 
文件 , 它 还 支持 正则 表达 式 。 代 码 清单 2-5 展示 了 一 个 含有 常用 首选 项 的 样 例 jshintrc 文件 ， 
它 可 以 作为 一 个 有 用 的 起 点 。 关 于 所 有 支持 的 配置 选项 和 相关 文档 的 详细 列表 ， 可 访问 
http://www.jshint.com/docs/options/。 
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代码 清单 2-5: .jshintrc 


{ 
"node": true, 
"browser": true, 
"esnext": true, 
"bitwise": true, 
"camelcase": true, 
Surly"s teu 
"oqeqeq"”: truey 
"immed": true, 
windeont ws :2° 
"latedef": true, 
"newcap": true, 
"noarg": true, 
"quotmark": "single", 
"undef": true, 
"unused": true, 
watrict™”s tries 
"trailing": true, 
"smarttabs": true 

} 


现在 我 们 已 经 使 用 jshintrc 文件 配置 了 项 目的 linting 设置 ， 接 下 来 触发 Grunt JSHint 
任务 并 查看 输出 : 


$ grunt jshint 
Running "jshint:all" (jshint) task 


Gruntfile.js 
5 | grunt.initConfig({ 
^ Missing "use strict" statement. 
app/app.js 
3 langular.module('Workflow', []) 
^ "angular' is not defined. 


>> 2 errors in 2 files 
Warning: Task "jshint:all" failed. Use --force to continue . 


Aborted due to warnings. 


可 以 看 到 JSHint 分 别 报告 了 两 个 JavaScript 文件 的 两 个 错误 。 第 一 个 错误 可 以 通过 在 
Gruntfile 顶部 添加 “use strict :的 方式 轻松 解决 .而 为 了 解决 第 二 个 错误 , 则 需要 更 新 jshintrc 
文件 ， 在 其 中 添加 配置 选项 "predef": ["angular"]， 从 而 使 JSHint 将 angular 识别 为 一 个 全 局 
定义 的 变量 。 在 命令 行 中 重新 运行 JSHint 任务 ， 验 证 JavaScript 文件 中 不 存在 lint 可 以 检 
测 到 的 错误 。 关 于 JSHint 任务 可 用 配置 选项 的 完整 列表 , 可 访问 插件 文档 页 面 https://github. 
com/gruntjs/grunt-contrib-jshint。 
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注意 : 

Strict Mode 是 ECMAScript 5 的 一 个 功能 ， 通 过 它 可 以 将 程序 或 函数 置 于 严格 操作 上 
下 文中 ， 从 而 阻止 特定 操作 的 产生 并 抛 出 更 多 异常 。 可 在 http://caniuse.com/#feat=use-strict 
网 址 中 检查 当前 支持 Strict Mode 的 浏览 器 的 详细 列表 。 关于 Strict Mode 的 更 多 信息 , 可 访 
问 http://www.ecma-international.org/publications/files/ ECMA-ST/Ecma-262.pdf 中 ES5 规 范 的 
第 235 页 。 


4. Watch 任务 


grunt-contrib-watch 公开 一 个 watch 任务 ， 可 以 轻松 地 配置 它 ， 在 添加 、 改 变 或 删除 被 
监视 文件 的 模式 时 运行 预定 义 的 任务 。 该 插件 允许 自动 执行 其 他 任务 ， 并 提供 将 livereload 
集成 作为 工作 流 一 部 分 这 个 任务 的 最 后 一 步 (开始 在 connect 任务 的 配置 中 讨论 过 )。 通 过 在 
Gruntfile 文件 的 JSHint 任务 之 后 添加 下 面 的 代码 ， 把 到 此 为 止 创建 的 所 有 任务 都 组 合 到 
二 起 ; 


// 配置 来 自 'grunt-contrib-watch' 的 'watch' 任 务 
watch: { 
options: { 
livereload: '<%= connect.options.livereload %>', 
}, 
js: { 
files: ['app/*.js'], 
tasks: ['jshint'] 
}, 
styles: { 
files: ['app/*.less'], 
tasks: ['less'] 
}, 
html: { 
files: ['app/*.html'] 
} 
} 


注意 ， 这 里 使 用 任务 级 别 的 option 属 性 ， 因 此 接 下 来 所 有 配置 的 目标 都 启用 了 
livereload。 然 后 继续 为 所 有 和 希望 监视 变动 的 每 个 文件 组 创建 新 的 目标 。 在 js 和 styles 目 标 中 ， 
我 们 指定 了 两 个 选项 : 一 个 文件 模式 的 数组 和 一 个 在 监视 文件 被 修改 时 将 要 执行 的 任务 的 
数组 。html 目 标 并 未 指定 需要 运行 的 任务 ， 因 为 我 们 不 打算 这 么 做 ， 现 在 对 超 文本 标记 语 
言 (HTMD) 文 件 所 进行 的 操作 都 是 工作 流 的 一 部 分 ， 而 不 只 是 提供 它们 。 在 命令 行 中 运行 
grunt watch, 然后 修改 JavaScript 或 Less 文 件 , 这 应 该 会 自动 地 (分 别 ) 触 发 JSHint 和 Less 任 务 。 
关于 watch 任 务 可 用 配置 选项 的 完整 列表 ， 可 访问 插件 文档 页 面 https://github.com/gruntjs/ 
grunt-contrib-watch。 


5. 默认 任务 
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服务 器 , 从 而 使 livereload 可 以 正常 工作 ,为 此 , 需要 调用 grunt.registerTask() 函 数 使 用 Grunt 
注册 一 个 新 的 别名 任务 。 该 方法 将 接受 taskName 和 taskList 作为 参数 ， 其 中 taskList 必须 
是 以 指定 顺序 运行 的 任务 所 组 成 的 一 个 数组 。 可 修改 Gruntfile 底部 注册 的 默认 任务 ， 代 码 
应 如 下 所 示 : 

// 默认 任务 


grunt.registerTask('default', ['connect:development', "watch']) 7 
在 使 用 CHC 终止 了 之 前 运行 的 watch 任务 之 后 ， 可 使 用 下 面 的 命令 启动 默认 任务 : 
grunt 


该 命令 将 启动 连接 服务 器 ， 并 在 新 的 浏览 器 选项 卡 中 打开 应 用 的 一 个 实例 。 接 下 来 修 
改 index.html 文件 ， 在 开始 <body> 标 记 之 后 添加 <p>Hello Grunt</p>。Grunt 应 该 在 文件 保 
存 之 后 看 到 这 个 改变 , 并 同时 向 livereload 服务 器 发 送 一 条 消息 , 让 使 用 该 文件 的 客户 端 重 
新 加 载 页 面 。 我 们 不 需要 在 每 次 修改 文件 之 后 都 单 击 浏览 器 的 Refresh 按钮 。 尝 试 将 
main.less 文件 中 <h1> 元 素 的 颜色 从 SteelBlue 改 为 Red。 Grunt 将 把 它 编译 成 main.css 文件 ， 
并 使 用 livereload 自动 更 新 DOM。 最 后 , 在 appjs 中 的 $scope.tools 数组 里 添加 'Gulp'，Gunt 
将 使 用 JSHint 执行 lint 操作 ， 并 使 用 这 个 简单 的 改动 更 新 浏览 器 选项 卡 。 


2.3.6 创建 自 定义 任务 


我 们 已 经 看 到 了 如 何 使 用 由 一 些 插件 提供 的 简单 配置 选项 自动 执行 几 个 常见 的 工作 流 
任务 。 不 过 ， 如 果 希 望 创 建 不 依赖 于 之 前 存在 的 插件 的 自 定义 任务 , 那么 也 可 以 轻松 实现 ， 
因为 Grunt 是 使 用 Nodejs 运行 的 。 可 以 轻松 地 将 要 编写 的 任意 JavaScript 代码 插入 到 当前 
工作 流 中 ， 如 接 下 来 的 脚本 所 示 ，Grunt 提供 了 一 些 有 用 的 机 制 ， 将 帮助 创建 自 定义 任务 : 

// 自 定义 任务 

grunt.registerTask('myTask', 'My custom task', function(one, two) { 


// Force task to run in async mode and save handle for completion callback 
Var done = this.async(); 


setTimeout (function() { 
// [2] 访问 任务 名 称 和 参数 


grunt.log.writeln (this.name, one, two); 


// [2] 如 果 属 性 不 存在 就 失败 


grunt .config.requires('connect.options.livereload'); 


// [3] 访 问 配 置 属 性 
grunt.1log.writeln('The livereload port is ' 
+ grunt.config('connect.options.livereload')); 


// 异步 成 功 完成 


done () > 


// [4] 运 行 其 他 任务 
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grunt.task.run('default'); 
}.bind(this), 1000); 
Fy 


该 样 例 使 用 Grunt 注册 了 一 个 名 为 myTask 的 任务 , 它 将 接受 两 个 参数 , 并 包含 了 一 个 


定义 描述 。 为 了 演示 一 个 以 异步 模式 运行 的 任务 ， 这 里 调用 了 thisasync0， 剩 余 的 代码 


将 在 setTimeout() 的 调用 中 执行 ， 并 在 异步 成 功 完成 之 后 调用 done()。 这 里 将 使 用 辅助 函 
数 访 问 任务 名 和 参数 [1]， 如 果 指 定 的 配置 属性 不 存在 就 失败 [2]， 并 访问 之 前 已 经 定义 的 
Grunt 配置 选项 [3]。 指 示 自 定义 任务 运行 其 他 工作 流 任务 也 是 可 以 的 ， 如 [外 所 示 。 如 本 章 
之 前 所 提 到 的 ， 还 可 以 使 用 分 号 分 隔 的 参数 调用 自 定义 任务 。 该 任务 的 调用 和 输入 如 下 
所 示 : 


$ grunt myTask:Hello:World 

Running "myTask:Hello:World" (myTask) task 
myTask Hello World 

The livereload port is 35729 


Running "connect:development" (connect) task 
Started connect web server on http://localhost:9000 


Running "watch" task 
Waiting... 


注意 : 
注意 如 何 使 用 gruntlog.writeln0) 辅 助 函数 输出 多 个 变量 。Grunt 提供 了 几 个 辅助 函数 ， 


其 中 一 个 就 是 grunt.log.error()， 如 果 使 用 一 个 消息 调用 它 ， 那 么 它 就 会 终止 接 下 来 任何 任 
务 的 执行 。 强 制 Grunt 在 一 个 错误 发 生 后 执行 剩 下 任务 的 唯一 方式 就 是 : 在 命令 行 中 运行 
grunt 时 指定 --force 标志 。 


现在 我 们 已 经 学 习 了 如 何 注册 自 定义 任务 和 使 用 一 些 内 置 的 辅助 函数 ， 使 用 Grunt 所 


完成 的 事情 的 唯一 限制 是 基于 JavaScript 代码 所 能 完成 的 事情 ， 所 以 天 空 才 是 极限 ! 代 码 
清单 2-6 展示 了 完整 的 Gruntfile， 它 将 自动 执行 本 节 配 置 的 所 有 工作 流 任务 ， 以 及 之 前 描 
述 的 自 定义 任务 。 接 下 来 将 使 用 Gulpjs 创建 一 个 类 似 的 工作 流 ， 这 是 另 一 种 流行 的 开源 
JavaScript 构建 系统 ， 但 它 将 使 用 一 种 不 同 的 哲学 原则 。 


代码 清单 2-6: 完整 的 Gruntfile.js 


"use strict'; 


// 封装 器 函数 


module .exports = function(grunt) { 
// 项 目 和 任务 配置 


grunt.initConfig({ 
pkg: grunt.file.readJsON('package.json'), 
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// 配置 来 自 'grunt-contrib-connect' 的 'connect' 任 务 
connect: { 
// 任务 选项 ， 履 盖 内 置 的 默认 值 
options: { 
port: 9000, 
open: true, 
livereload: 35729, 
hostname: 'localhost" 
}, 
// 任意 命名 的 目标 
development: { 
// 目标 选项 ， 履 盖 任 务 选项 
options: { 
middleware: function (connect) { 
return [ 
connect.static('app') 


// 配置 来 自 'grunt-contrib-less' 的 'less' 任 务 


less: { 
development: { 
files: { 


"app/main.css': 'app/main.less' 
} 
} 
}, 


// 配置 来 自 'grunt-contrib-jshint' 的 'jshint' 任 务 
jshint: { 
options: { 
jshintrc: ' .jshintrc'" 
Fs 
all: [ 
'Gruntfile.js', 
"app/*.js" 
] 
}, 


// 配置 来 自 'grunt-contrib-watch' 的 'watch' 任 务 
watch: { 
options: { 
livereload: '<%= connect.options.livereload $%>', 
}, 
js: { 
files: [app/*. 33"), 


第 2 章 智能 工作 流 和 构建 工具 


tasks: ['jshint"] 

}, 

styles: { 
files: ['app/*.less'], 
taskss "Less"] 


}, 
html: { 
files: ['app/*.html'] 


]) 


// 加 载 目标 插件 ， 它 将 提供 特定 的 任务 


require('load-grunt-tasks') (grunt) 


// 默认 任务 


grunt.registerTask('default', ['connect:development', 'watch']); 


// 自 定义 任务 
grunt.registerTask('myTask', 'My custom task', function(one, two) { 
// 强迫 任务 以 异步 模式 运行 ， 并 保存 完成 回调 的 句柄 


var done = this.async(); 


setTimeout (function() { 
// 访问 任务 名 和 参数 


grunt.log.writeln (this.name, one, two); 


// 如 果 属 性 不 存在 就 失败 


grunt .config.requires('connect.options.livereload'); 


// 访问 配置 属性 
grunt.log.writeln('The livereload port is ' 
+ grunt.config('connect.options.livereload')); 


// 成 功 完成 异步 


done(); 
// 运行 其 他 任务 
grunt.task.run('default'); 
}.bind(this), 1000); 
]) 


}; 


2.4 Gulp 


Gulp 是 另 一 个 流行 的 工作 流 自 动 化 工具 , 它 使 用 Nodejs 流 提供 了 一 个 流 式 构建 系统 ， 
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并 且 支 持 “代码 优 于 配置 ”的 原则 。 这 种 方式 通过 移 除了 对 大 型 配置 文件 的 需求 ， 简 化 了 
复杂 任务 的 管理 。 类 似 于 Grunt，Gulp 提供 了 一 个 命令 行 工 具 ， 用 于 运行 由 不 断 发 展 的 插 
件 社区 所 提供 的 任务 ， 以 及 使 用 JavaScript 开发 的 自 定义 任务 。 

2.4.1 开始 使 用 Gulp 


开始 使 用 Gulp 和 它 优雅 的 简单 应 用 编程 接口 (APD 的 第 一 件 事 就 是 在 机 器 中 的 全 局 位 
置 安装 命令 行 。 为 访问 gulp 工具 ， 可 运行 下 面 的 命令 : 


npm install -g gulp 


2.4.2 安装 插件 


在 本 节 , 将 使 用 Grunt 创建 本 章 之 前 构建 的 相同 工作 流 , 但 是 使 用 的 是 Gulp 的 插件 生 
态 系统 。 现 在 Gulp 已 经 安装 在 全 局 位 置 中 ， 接 下 来 要 安装 完成 该 任务 所 需 的 插件 和 模块 ， 
可 运行 下 面 的 命令 行 : 


Tt 


npm install --save-dev gulp 

npm install --save-dev gulp-load-plugins 
npm install --save-dev gulp-livereload 
npm install --save-dev gulp-less 

npm install --save-dev gulp-jshint 

npm install --save-dev jshint-stylish 

npm install --save-dev opn 

npm install --save-dev connect 

npm install --save-dev connect-livereload 


打开 package.json 文件 并 检查 devDependencies 属性 , 验证 之 前 代码 中 列 出 的 所 有 插件 
都 已 经 被 添加 为 开发 依赖 。 在 成 功 安装 了 所 有 必需 的 插件 之 后 ， 下 一 步 就 是 创建 第 一 个 
Gulpfile。 


2.4.3 Gulpfile 


Gulpfilejs 类 似 于 本 章 之 前 创建 的 Gruntfilejs 文 件 ， 它 被 保存 在 项 目的 根 目录 中 ， 是 
packagejson 的 兄弟 文件 。 它 应 该 随 着 其 他 源 代码 一 起 提交 。 代码 清 单 2-7 包 含 一 个 Gulpfile.js 
文件 的 主干 代码 ， 接 下 来 的 小 节 将 基于 它 配置 各 种 不 同 的 任务 。 
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代码 清单 2-7: 主干 Gulpfilejs 
// [1] 要 求 加 载 gulp 


var gulp = require('gulp'); 


// [2] 加 载 插件 
var $ = require('gulp-load-plugins') (); 


// [3] 使 用 'gulp' 运 行 的 默认 任务 
gulp.task('default', [], function () { 
Ws 
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如 代码 清单 所 示 , Gulpfile 的 主干 由 几 部 分 组 成 : [1] 加 载 Gulp 库 、 [2] 加 载 package.json 
文件 中 列 出 的 所 有 插件 、[3] 注 册 一 个 特定 的 任务 。 与 Grunt 一 样 , 默认 的 Gulp 任务 将 在 运 
行 gulp 命令 时 执行 。 因 为 Gulp 主张 约定 优 于 配置 的 理念 ， 所 以 要 注意 到 这 里 没有 等 同 于 
Grunt initConfig() 方 法 的 Gulp 方法 。 现 在 我 们 已 经 看 到 了 Gulpfile 的 3 个 主要 部 分 ， 接 下 
来 就 可 以 编写 自己 的 第 一 个 Gulp 任务 了 。 


注意 ;: 

已 安装 的 gulp-load-plugins 模块 将 根据 指定 的 变量 ， 加 载 package.json 文件 中 列 出 的 
Gulp 插件 ， 在 去 除了 gulp- 前 组 之 后 加 载 每 个 插件 并 为 它们 添加 命名 空间 。 没 有 这 个 有 用 
的 模块 ， 你 就 不 得 不 手动 加 载 每 个 插件 ， 如 下 所 示 : 


var jshint = require('gulp-jshint'); 


注意 ， 其 功能 不 同 于 Grunt 的 load-grunt-tasks 插件 ， 因 为 在 本 例 中 ， 你 正在 直接 请 求 
加 载 一 个 插件 模块 的 句柄 ， 而 不 是 加 载 可 配置 的 任务 。 


2.4.4 创建 任务 


Gulp 任务 的 结构 将 遵守 格式 gulp.task(name[, deps], fp)， 它 由 一 个 名 字 、 一 个 可 选 依赖 
的 列表 (数组 形式 ) 以 及 一 个 执行 目标 操作 的 回调 函数 组 成 。 名 字 被 用 于 从 命令 行 直接 调用 
任务 ， 可 选 的 依赖 数组 中 可 以 包含 一 个 任务 名 称 的 列表 ， 这 些 任 务 将 在 当前 任务 函数 运行 
之 前 执行 和 完成 。 在 本 节 ， 将 使 用 每 个 已 安装 的 Gulp 插件 和 Nodejs 模块 ， 创 建 一 个 自动 
化 工作 流 ， 用 于 提供 应 用 资产 、 编 译 Less 样式 表 和 针对 JavaScript 文件 执行 Lint 操作 。 


1. Connection 任务 


你 可 能 已 经 注意 到 了 : 并 非 所 有 已 安装 的 模块 都 是 特定 于 Gulp 的 插件 。 因 为 Gulp 采 
用 更 加 编程 化 的 方式 自动 执行 开发 者 工作 流 ， 所 以 它 通常 足够 简单 ， 可 以 直接 使 用 Nodejs 
模块 执行 任务 的 操作 。 我 们 要 实现 的 connect 任务 正 是 如 此 。 修 改 Gulpfile， 在 加 载 Gulp 
插件 之 后 的 某 个 位 置 添加 下 面 的 代码 : 


// 用 于 启动 Web 服务 器 的 'connect ' 任 务 
gulp.task('connect', function () { 
Var connect = require('connect'); 
var app = connect () 
.Use (require ('connect-1livereload') ({ port: 35729 })) 
.Use (Connect .static('"app')) 
-Use (connect.directory('app')); 


require('http') .createServer (app) 
.listen(9000) 
.on('listening', function () { 
console.log('Started connect web server on http://localhost:9000°'); 
]) 
]) 
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在 使 用 Grunt 配 置 该 任务 时 ，grunt-contrib-connect 插 件 将 在 底层 使 用 Nodejs 模 块 的 
connect 和 connect-livereload， 并 公开 相应 的 配置 选项 。 按 照 Gulp 约定 优 于 配置 的 哲学 ,之 
前 的 代码 将 直接 与 这 两 个 模块 进行 交互 ， 并 实现 目标 任务 功能 。 一 个 新 的 Connect 服 务 器 将 
通过 .use() 函 数 使 用 3 个 中 间 件 插件 实例 化 ,这 些 插 件 将 把 livereload 脚 本 注入 对 外 的 请 求 中 、 
提供 app 目 录 中 的 静态 文件 ， 并 使 该 目录 自身 变 得 可 浏览 。 最 后 ， 该 代码 将 使 用 Node 内 置 
的 http 模 块 创建 一 个 新 的 服务 器 集合 ， 并 使 用 Connect 应 用 实例 监听 端口 9000。 最 终 在 实现 
了 connect 任 务 之 后 ， 请 运行 下 面 的 命令 : 


gulp connect 


打开 浏览 器 访问 http://localhost:9000/， 页 面 中 将 显示 出 本 章 之 前 创建 的 简单 应 用 。 尽 
管 这 个 简单 的 Connect 应 用 实例 足以 满足 大 多 数 工作 流 自动 化 的 需求 ， 但 是 可 以 找到 所 有 
附带 的 Connect 中 间 件 插件 的 完整 列表 ， 文 档 站 点 为 http://www.senchalabs.org/connect/。 


2. less 任务 


下 一 步 是 创建 less 任务 ， 通 过 它 使 用 Gulp 把 Less 文件 编译 成 CSS 文件 。 因 为 我 们 已 
经 安装 了 gulp-less 插件 ， 所 以 实际 上 less 任务 的 实现 是 非常 直观 的 。 在 connect 任务 实现 
之 后 添加 下 面 的 代码 : 
// 用 于 编译 样式 的 ' less ' 任 务 
gulp.task('less', function () { 
return gulp.src('app/*.less') 
-pipe($.less({ paths: 'app' })) 
.pipe (gulp.dest ('app')); 
1); 
该 任务 要 做 的 第 一 件 事情 就 是 调用 gulp.src0， 它 将 接受 一 个 glob， 并 返回 一 个 文件 结 
构 流 ( 可 以 被 导入 到 其 他 插件 中 )。Globbing 是 这 样 一 个 概念 : 它 允 许 使 用 shell 模式 和 正则 
表达 式 匹 配 文 件 。 然 后 调用 Node.js 的 Stream pipeO) 函 数 把 文件 流 导 向 gulp-less 插件 ( 它 被 
添加 到 $ 变 量 的 命名 空间 中 )， 将 目标 app/ 目 录 指 定 为 路 径 。 此 时 输出 流 中 包含 了 已 编译 的 
CSS 文件 ， 接 受 一 个 路 径 的 gulp.dest0) 将 被 调用 ， 把 流 写 入 文件 中 。 在 使 用 gulp.destO 时 ， 
不 存在 的 文件 夹 将 自动 创建 。 因 为 gulp-less 插件 将 维护 文件 夹 结构 ， 并 重 命 名 输出 文件 ， 
指定 的 路 径 将 被 用 作 一 个 目录 。 运 行 下 面 的 命令 调用 完整 的 less 任务 : 


gulp less 


该 命令 将 把 app/ 目 录 中 的 所 有 less 文件 编译 成 对 应 的 CSS 文件 。 值 得 一 提 的 是 : 事实 
上 因为 Less 是 一 个 Nodejs， 同 时 也 是 一 个 命令 行 工具 ， 它 公开 一 个 API 用 于 在 代码 中 通 
过 编程 的 方式 使 用 。 这 意味 着 Gulp less 任务 从 技术 角度 看 可 以 直接 使 用 Nodejs 模块 实现 ， 
但 是 gulpless 插件 自动 完成 了 大 部 分 工作 ， 这 将 使 它 更 易于 使 用 。 可 以 访问 插件 文档 页 面 
https://github.com/plus3network/gulp-less 找到 gulp-less 命令 用 法 的 完整 列表 。 
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注意 : 

你 可 能 已 经 注意 到 了 本 节 创 建 的 less 任务 包含 了 一 个 返回 语句 。 按 照 定义 ， 如 果 Gulp 
任务 的 实现 函数 接受 一 个 回调 函数 、 返 回 一 个 流 或 者 返回 一 个 约定 (promise)， 那 么 它 可 以 
通过 异步 的 方式 运行 。 随 着 构建 系统 功能 的 扩展 ， 使 用 Node 的 异步 能 力 将 变 得 越 来 越 重 
要 。 因 为 lp.src0 和 Stream pipe() 都 将 返回 可 链接 的 流 ， 所 以 符合 三 个 条 件 之 一 的 less 任务 
的 实现 函数 将 要 求 Gulp 以 异步 的 方式 运行 该 任务 .接受 一 个 回调 函数 可 以 采用 下 面 的 方式 
实现 : 

gulp.task('taskName'，function (done) { 

// 做 一 些 工 作 ， 并 在 异步 调用 时 失败 
done (err); 

]) 


也 可 以 使 用 流行 的 q 库 返 回 一 个 约定 (promise)， 如 下 所 示 : 
var 0 = require('q'); 


gulp.task('taskName', function() { 
var deferred = Q.defer(); 
// 执行 异步 工作 
setTimeout (function() { 
deferred.resolve(); 
}, 1); 
return deferred.promise; 
}); 


3. JSHint 任务 


因为 对 JavaScript 文件 执行 Lint 操作 是 所 有 前 端 构建 系统 的 一 个 重要 部 分 ， 所 以 将 使 
用 之 前 已 经 安装 的 gulp-jshint 插件 在 Gulp 工作 流 中 添加 这 个 功能 。 在 Gulpfile 的 less 任务 
之 后 添加 下 面 的 代码 实现 jshint 任务 : 
// 用 于 对 JS 文件 执行 Lint 操作 的 'jshint' 任 务 
gulp.task('jshint', function () { 
return gulp.src('app/*.js') 
.pipe ($.jshint ()) 
-pipe($.jshint.reporter (require('jshint-stylish'))); 
DD); 
这 里 glob 模 式 app/*.js 被 传 给 了 gulp.src0， 从 而 使 所 有 app/ 目 录 中 的 JavaScript 文 件 都 被 
读 取 并 使 用 流 进行 表示 (可 以 被 导入 到 gulp-jshint 插 件 中 )， 它 们 将 通过 $.jshintO 进 行 访问 。 
注意 ， 因 为 不 需要 将 输出 写 入 到 磁盘 ， 所 以 在 本 例 中 使 用 gulp.dest0 是 不 必要 的 。 另 外 值得 
一 提 的 是 : 因为 该 任务 实现 函数 返回 了 一 个 Nodejs 流 ， 所 以 Gulp 将 异步 地 针对 JavaScript 
文件 执行 Lint 操 作 。 请 运行 下 面 的 命令 ， 调 用 完整 的 jshint 任 务 : 


gulp jshint 


73 


AngularJS 高 级 编程 


74 


此 时 ，linting 进程 的 输出 应 该 显示 没有 错误 。 为 了 演示 一 个 linting 错误 ， 从 app/appjs 
文件 中 移 除 "use strict:, 并 重新 运行 jshint 任务 。 你 应 该 注意 到 它 的 输出 格式 不 同 于 调用 grunt 
jshint 时 产生 的 输出 。 这 是 因为 JSHint 被 设置 为 使 用 jshint-stylish 报告 器 (本 节 之 前 已 经 安 
装 了 )， 而 不 是 使 用 内 置 的 默认 报告 器 。 用 下 面 的 代码 蔡 换 在 其 中 注册 报告 器 的 代码 行 : 


.pipe($.jshint.reporter('default')); 


重新 运行 Gulp jshint 任务 现在 应 该 生成 不 同 的 结果 。 如 你 所 见 ，JSHint 报告 器 将 操纵 
错误 的 格式 化 方式 。 在 本 例 中 ，jshint-stylish 报告 器 把 错误 消息 分 割 成 多 行 ， 并 为 部 分 内 容 
添加 颜色 ， 以 便 阅读 。 可 以 访问 网 址 http://jshint.com/docs/reporters/ 找到 创建 自 定 义 报 告 
器 的 信息 ， 以 满足 个 人 的 需求 。 在 继续 实现 watch 任务 之 前 ， 请 保证 已 经 相应 地 撤消 了 
app/appjs 文件 和 jshint 任务 的 改动 。 关 于 所 有 gulp-jshint 插件 支持 的 调用 的 详细 列表 ， 可 
访问 https://github.com/spenceralger/gulp-jshint。 


4. Watch 任务 
与 使 用 Grunt 时 必须 安装 和 配置 grunt-contrib-watch 插件 不 同 ，Gulp 通过 gulp.watch() 


函数 在 它 的 API 中 直接 构建 了 文件 监视 能 力 , 为 了 使 用 监视 功能 自动 执行 之 前 定义 的 任务 ， 
需要 在 Gulpfile 中 的 jshint 任务 之 后 添加 下 面 的 代码 行 : 


// 用 于 响应 文件 修改 的 “watch” 任 务 
gulp.task('watch', function () { 


// 在 默认 端口 35729 上 启动 一 个 1ivereload 服务 器 


$.livereload.listen(); 


// 监视 改变 并 通知 LR 服务 器 
gulp.watch([ 
"app/* .html"s 
"app/*.C3s", 
"app/*. js 
]).on('change', function (file) { 
$.livereload.changed (file.path); 
]) 7 


// 为 指定 文件 的 改变 运行 gulp 任务 
gulp.watch('app/*.js', ['jshint']); 


gulp.watch('app/*.less', ['less']); 
1); 


监视 任务 要 做 的 第 一 件 事 就 是 使 用 之 前 安装 的 gulp-livereload 插件 在 默认 的 端口 上 启 
动 一 个 livereload 服务 器 。 此 后 , 使 用 一 个 文件 glob 模式 (应 该 被 监视 变化 的 文件 ) 的 数组 调 
用 gulp.watch()。 因 为 gulp.watchO 返 回 了 一 个 Nodejs EventEmitter 用 于 发 射 改变 事件 ， 所 
以 接 下 来 要 调用 EventEmitter.on() 函 数 ， 从 而 使 livereload 服务 器 可 以 得 到 接 下 来 文件 修改 
的 通知 。 这 是 通过 将 被 修改 的 文件 用 作 参 数 调用 插件 的 changed0) 函 数 实现 的 。 此 时 ,watch 
任务 已 经 被 创建 用 于 监视 HIML、CSS 和 JavaScript 文件 的 变动 ， 并 且 它 能 够 与 livereload 
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服务 器 进行 通信 ， 从 而 使 更 新 可 以 自动 被 传播 到 所 有 已 连接 到 的 浏览 器 。 不 过 ， 为 了 使 用 
之 前 定义 的 jshint 和 less 任务 ， 需 要 两 个 对 gulp.watch() 方 法 的 额外 调用 ， 用 于 指示 Gulp 
在 JavaScript 和 less 文件 改动 时 运行 这 些 任务 。 在 命令 行 中 运行 gulp watch， 然 后 修改 一 个 
JavaScript 或 者 less 文件 ,现在 它们 应 该 分别) 自动 触发 jshint 和 less 任务 .关于 可 用 的 Gulp 
API 函数 的 完整 列表 ， 请 访问 文档 页 面 https://github.com/gulpjs/gulp/blob/master/ 
docs/APImd。 


5. 默认 任务 


与 本 章 之 前 创建 的 Grunt 工作 流 一 样 , 需要 配置 默认 的 Gulp 任务 , 并 同时 运行 connect 
和 watch 任务 ， 从 而 实现 一 个 更 加 自动 化 的 解决 方案 。 为 此 ， 在 Gulpfile 文件 的 底部 ， 将 
默认 任务 的 代码 修改 为 如 下 所 示 的 内 容 : 


// 运行 'gulp' 所 使 用 的 默认 任务 

gulp.task('default', ['connect', 'watch'], function () { 
require('opn') ('http://localhost:9000'); 

1); 

注意 ， 这 个 gulp.task0 调 用 将 使 用 一 个 任务 依赖 的 可 选 数 组 ， 这 些 任务 将 在 当前 任务 

实现 函数 运行 之 前 执行 并 完成 。 执行 connect 和 watch 任务 后 , 使 用 之 前 安装 opn 库 在 默认 

浏览 器 中 打开 这 个 样 例 应 用 。 对 于 Grunt 来 说 ， 这 个 功能 是 由 grunt-contrib-connect 插件 的 

一 个 可 配置 选项 所 控制 的 。 如 果 之 前 已 经 运行 了 gulp watch， 可 运行 下 面 的 命令 ， 保 证 在 

启动 默认 任务 之 前 终止 它 : 


Gulp 


与 Grunt 一 样 ， 该 命令 应 该 启动 连接 服务 器 ， 初 始 化 文件 监视 功能 ， 并 在 新 的 浏览 器 
选项 卡 中 打开 一 个 应 用 的 实例 。 为 了 验证 Gulp 工作 流 是 否 按 照 目 标 正常 工作 ， 可 对 app/ 
目录 中 的 index.html、appjs 和 main.css 做 一 些 修改 。Gulp 现在 应 该 对 JavaScript 文件 执行 
Lint 操作 、 把 less 文件 编译 成 CSS 文件 ， 并 使 用 livereload 功能 提供 所 有 的 应 用 资产 。 在 
继续 学 习 下 一 节 之 前 ， 请 撤消 对 这 些 文件 的 改动 。 


2.4.5 ”参数 和 异步 行为 


Grunt 部 分 内 容 中 的 最 后 一 个 样 例 创建 了 一 个 可 以 接受 参数 和 使 用 一 些 内 置 辅助 函数 
的 自 定义 任务 。 而 对 于 Gulp 来 说 ， 整 个 Gulpfile 都 是 由 自 定义 任务 组 成 的 ， 所 以 在 本 节 将 
使 用 两 个 库 重 新 创建 myTask, 这 两 个 库 将 帮助 解析 命令 行 选项 和 促进 异步 编程 。 可 在 命令 
行 中 运行 下 面 的 命令 安装 所 需 的 模块 : 


npm install --save-dev nopt 
npm install --save-dev q 


nopt 模块 是 一 个 得 到 良好 维护 的 参数 解析 库 ， 而 q 模块 是 一 个 在 JavaScript 中 创建 和 
组 成 异步 约定 的 工具 。 另 两 个 流行 的 选项 解析 库 是 minimist 和 yargs。async 模块 也 值得 一 
提 ， 因 为 它 是 最 依赖 NPM 注册 表 中 Node 模块 的 模块 之 一 ， 为 使 用 异步 JavaScript 提供 了 
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直观 的 、 强 大 的 工具 函数 ,为 了 看 到 如 何在 Gulp 任务 的 上 下 文中 使 用 这 些 库 , 可 在 Gulpfile 
文件 的 项 部、 其 他 require 语句 之 下 添加 var nopt = require('nopt"):， 然 后 在 文件 底部 添加 下 


面 的 代码 : 
// [1] 设 置 cLI 参数 的 解析 
Var knownopts = { 


'one': String, 
"tuos SteLing 


[a 
var 


shorthands = { 


'o': ['--one', "Hello'], 
Ev [==tyoy World’l 


7 
Var 


options = nopt (knownOpts, shorthands); 


// 自 定 义 任务 
gulp.task('myTask', function () { 
var deferred = Q.defer(); 


setTimeout (function() { 


// [2] 如 果 cLI 参数 不 存在 就 失败 
if (!options.one || !options.two) { 

deferred.reject ('Error: Please specify the --one and --two flags.'); 
} else { 

// [3] 访问 CLI 参数 

console.log(options.one + ' ' + options.two); 


// [4] 异 步 成 功 完成 
deferred.resolve (); 
} 


}, 1000); 


return deferred.promise; 


1); 


注意 : 
约定 是 一 个 异步 编程 抽象 ， 它 再 次 反 转 了 与 将 回调 函数 作为 参数 传 入 相关 的 “ 反 转 控 
制 模式 ”。 与 接受 一 个 回调 相反 ，myTask 实现 函数 将 返回 一 个 约定 (Gulp 所 支持 的 异步 行 


为 )。 尽 


管 关于 约定 的 更 多 细节 讨论 超出 了 本 章 的 范围 ， 但 值得 一 提 的 是 q 模块 兼容 


Promises/A+。 关 于 Promises/A+ 开 放 标 准 的 更 详细 解释 ， 请 访问 规范 页 面 : http://promises- 
aplus.github.io/promises-spec/。 

在 实现 myTask 之 前 ， 请 配置 nopt 模块 ， 显 式 地 解析 两 个 命令 行 选 项 和 它们 相关 的 速 
记 标 志 [1]。 速 记 定义 可 以 指定 每 个 选项 标志 的 默认 值 ， 本 例 正 是 这 种 情况 。 在 任务 实现 函 
数 中 ， 我 们 创建 了 一 个 新 的 延迟 对 象 ， 如 果 目 标 命令 行 标志 不 存在 ， 那 么 它 的 .reject() 函 数 


将 被 调 月 
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终端 中 显示 出 该 失败 信息 。 命 令 行 选项 在 使 用 nopt 解析 之 后 ， 可 以 通过 对 象 属性 的 方式 访 
问 ， 如 [3] 所 示 。 最 后 ， 如 果 延 迟 对 象 的 resolve0 函 数 被 调用 了 ， 那 么 myTask 就 成 功 实现 
了 异步 [4]。 请 运行 下 面 命令 中 的 任意 一 个 都 能 有 效 地 执行 该 任务 : 

gulp myTask --one Hello --two World 

gulp myTask -o --two Gulp 

gulp myTask -ot 
因为 Gulp 无 法 直接 接受 命令 行 参数 作为 函数 参数 ,所 以 我 们 应 该 按照 需求 使 用 解析 库 
增强 自己 的 任务 。 此 时 , 我 们 已 经 成 功 使 用 Gulp 重新 创建 了 之 前 使 用 Grunt 构建 的 自动 化 
工作 流 。 代 码 清单 2-8 展示 了 完整 的 Gulpfile， 它 提供 了 与 本 章 之 前 Gruntfile 所 提供 的 相 
同 功 能 。 在 下 一 节 , 将 对 如 何 使 用 Make 命令 行 工具 自动 执行 常见 的 JavaScript 构建 相关 任 
务 进行 简单 讨论 。 


代码 清单 2-8: 完整 的 Gulpfile.js 


"use strict'; 


var gulp = require('gulp'); 
var nopt = require('nopt'); 
var Q = require('q'); 


// 加 载 插件 


var $ = require('gulp-load-plugins') (); 


// 设置 cLI 参数 的 解析 
Var knownOopts = { 
'one': String, 
"TWo"s String 
}; 
Var shorthands = { 
"arr T==one"s “Hello 
由 二 
3 
Var options = nopt (knownOpts, shorthands); 


// 用 于 启动 Web 服务 器 的 'connect ' 任 务 
gulp.task('connect', function () { 
Var connect = require('connect'); 
Var app = Connect () 
-use (require('connect-livereload') ({ port: 35729 })) 
-use (Connect .static('app')) 
-Use (connect.directory('app')); 


require('http') .createServer (app) 
.listen(9000) 
.on('listening', function () { 
console.1log('Started connect web server on http://localhost:9000°'); 
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nD); 
17); 


// 用 于 编译 样式 的 'less' 任 务 
gulp.task('less', function () { 
return gulp.src('app/*.less') 
-pipe($.less({ paths: 'app' })) 
.pipe (gulp.dest ('app')); 
1D); 


// 用 于 对 Js 文件 执行 1int 操作 的 'jshint' 任 务 
gulp.task('jshint', function () { 
return gulp.src('app/*.js') 
-pipe($.jshint()) 
-pipe($.jshint.reporter (require('jshint-stylish'))); 
i 


// 用 于 响应 文件 修改 的 'watch ' 任务 
gulp.task('watch', function () { 
// 在 默认 端口 35729 上 启动 1ivereload 服务 器 


$.1livereload.listen(); 


// 监视 改动 ， 并 通知 LR 服务 器 
gulp.watch([ 
"app/* .html'v 
"pp/* Cs 
"app/*.js" 
]).on('change', function (file) { 
$.livereload.changed (file.path); 
}); 


// 为 指定 文件 的 改动 运行 gulp 任务 

gulp.watch('app/*.js', ['jshint']); 

gulp.watch('app/*.less', ['less']); 
1); 


// 运行 'gulp' 时 使 用 的 默认 任务 

gulp.task('default', ['connect', 'watch'], function () { 
require('opn') ('http://localhost:9000"'); 

}) 7 


// 自 定 义 任 务 
gulp.task('myTask', function () { 
Var deferred = OQ.defer(); 


setTimeout (function() { 
// Fail if CLI arguments don't exist 
if (!options.one || !options.two) { 
deferred.reject ('Error: Please specify the --one and --two flags.'); 
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} else { 
// 访问 CLI 参数 


console.log(options.one + ' ' + options.two); 


// 异步 成 功 完成 
deferred.resolve (); 
} 
}, 1000); 


return deferred.promise; 
1D); 


2.4.6 Gulp、Grunt 和 Make 


如 你 所 见 ,Grunt 和 Gulp 是 极其 复杂 和 强大 的 工作 流 自 动 化 工具 。 尽 管 它们 在 JavaScript 
开源 社区 中 都 极其 流行 , 但 令 人 感到 吃惊 的 是 , 大 量 流行 的 模块 仍 在 使 用 上 世纪 70 年 代 出 
现 的 自动 化 工具 : Make。 如 果 有 C 语言 编程 经 验 的 话 ， 那 么 你 可 能 曾经 使 用 Make 来 自动 
执行 编译 过 程 。 本 节 将 浏览 在 开发 JavaScript 开发 项 目 时 , 如何 使 用 Make 自动 执行 常见 的 
工作 流 任务 。 它 还 将 讨论 何 时 使 用 什么 样 的 技术 才 是 最 合适 的 。 


1. 使 用 Make 实现 自动 化 


Make 含有 编译 和 链接 C 代码 的 大 量 复杂 功能 ， 但 在 JavaScript 社区 中 ，Make 主要 用 
于 创建 常用 shell 脚本 的 别名 。 另 外 ，Make 允许 为 常用 程序 的 路 径 定 义 变量 ， 从 而 使 可 以 
创建 更 加 可 读 的 命令 。Make 通常 预 装 在 Linux 一 类 的 系统 中 ， 包 括 Mac OSX。 在 继续 学 
习 之 前 ,请 在 终端 中 运行 make 命令 验证 是 否 已 经 安装 了 Make。 你 应 该 得 到 类 似 于 下 面 的 
输出 : 


make: *** NO targets specified and no makefile found. Stop. 


与 Grunt 和 Gulp 一 样 ,为 Make 定义 的 规则 应 该 被 包含 在 一 个 名 为 Makefile 的 文件 中 ， 
该 文件 存在 于 项 目的 根 目录 中 。 在 运行 make 命令 时 ， 它 将 尝试 解析 当前 工作 目录 中 的 
Makefile。 代 码 清单 2-9 包含 了 一 个 用 于 编译 less 资产 的 简单 Makefile。 


代码 清单 2-9: Makefile 


LESSC = node modules/less/bin/lessc 


less: 
$ (LESSC) app/main.less > app/main.css 


为 了 使 整个 样 例 可 以 工作 ， 需 要 让 less 编译 器 成 为 项 目的 一 部 分 ， 可 以 通过 运行 npm 
install less 命令 完成 。 现 在 ， 请 运行 下 面 的 命令 编译 less 资产 : 


make less 


这 个 Makefile 定义 了 一 个 新 的 规则 less， 从 而 使 得 在 运行 make less 命令 时 ，make 命 
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令 知 道 如 何 运行 对 应 的 shell 脚本 。 而 且 ，Make 可 以 扩展 宏 ; 例如 之 前 所 示 的 SCLESSC) 就 
是 一 个 宏 ， 它 将 在 Make 执行 shell 脚本 之 前 被 扩展 到 node modules/less/bin/lessc 中 。 通 过 
这 种 方式 我 们 就 不 需要 再 通过 npm install less -g 命令 将 NPM 模块 安装 到 全 局 位 置 ， 这 在 
特定 的 开发 环境 配置 中 可 能 是 有 利 的 。 

Make 与 Grunt 和 Gulp 最 容易 产生 的 对 比 就 是 Make 大 致 上 等 同 于 Gulp， 但 是 规则 是 
通过 shell 脚本 语言 编写 的 , 而 不 是 使 用 JavaScript 创建 任务 。 尽 管 shell 脚本 可 能 非常 简单 
和 优雅 ， 但 是 它们 不 像 Nodejs 脚本 一 样 是 平台 独立 的 ， 并 且 没 有 很 好 的 方式 可 以 定义 
Makefile 所 需 的 外 部 程序 。 

为 演示 这 一 点 , 请 考虑 实现 一 个 类 似 于 本 章 之 前 定义 的 gulp watch 任务 所 完成 的 功能 : 
每 次 在 main.css 文件 改变 时 运行 make less 命令 。 因 为 lessc 程序 目前 不 允许 监视 文件 ， 所 
以 Makefile 将 负责 完成 这 个 任务 。 遗 憾 的 是 ， 监 视 文件 的 修改 是 一 个 无 法 被 很 好 地 映射 到 
标准 shell 命令 的 经 典 样 例 。 一 种 实现 方式 可 能 是 使 用 watch 命令 ; 不过， 该 命令 默认 在 
OSX 上 是 不 可 用 的 。 也 可 以 使 用 while 循环 实现 这 个 任务 ， 但 是 这 通常 是 个 糟糕 的 注意 。 
维护 和 测试 shell 脚本 是 出 了 名 的 困难 ， 在 bash 脚本 中 编写 逻辑 可 能 很 快 就 会 失控 。 不 过 
话 虽 这 人 么 说 ， 一 些 工 具 还 是 可 以 监视 内 置 文件 的 。 例 如 ，JavaScript 单元 测试 框架 Mocha 
有 一 个 -w 命令 行 标志 ， 可 以 指示 该 工具 监视 文件 的 改动 。 在 本 例 中 编写 一 个 watch 规则 是 
非常 简单 的 ， 所 有 需要 做 的 就 是 使 用 -w 命令 行 标志 运行 Mocha。 


2. 何 时 使 用 Make 


那么 什么 时 候 应 该 优先 使 用 Make， 而 不 是 Gulp 或 者 Grunt 呢 ? 一 般 的 经 验 法 则 是 让 
你 和 你 的 团队 保持 事情 尽 可 能 地 简单 。 如 果 唯 一 的 需求 是 能 够 运行 测试 套件 或 者 使 用 易于 
输入 的 命令 缩小 JavaScript 文件 ， 那 么 Make 就 足够 使 用 ， 并 且 可 以 提供 一 种 比 Gulp 或 者 
Grunt 更 简单 的 方式 。Make 是 不 是 一 个 完美 的 选择 , 取决 于 你 是 否 喜欢 和 熟悉 shell 脚本 (如 
果 构 建 过 程 依赖 于 许多 现存 shell 脚本 的 话 )， 并 且 取 决 于 你 的 开发 环境 。 不 过 ， 一 旦 需要 
更 加 复杂 的 能 力 , 例如 监视 文件 或 者 条 件 逻 辑 , 那么 Gulp 或 者 Grunt 可 能 就 是 更 好 的 选择 。 


3. 何 时 使 用 Grunt 


因为 Grunt 是 高 度 可 配置 的 ， 所 以 很 可 能 社区 已 经 为 大 多 数 任务 (你 可 能 希望 完成 的 ， 

只 与 工作 流 自动 化 和 构建 系统 相关 的 ) 都 创建 了 插件 ,这 意味 着 复杂 的 Gruntfile 可 能 只 需要 
通过 为 每 个 已 安装 的 插件 配置 任务 和 目标 即 可 创建 ， 这 只 需要 极 少 的 代码 。 对 于 包含 了 设 
计 师 的 团队 来 说 它 也 是 非常 有 用 的 ， 因 为 设计 师 们 会 希望 Less/Saas 编译 和 livereload 功 
能 成 为 工作 流 的 一 部 分 ， 而 不 是 专门 用 于 JavaScript 编程 。 更 喜欢 使 用 配置 而 不 是 使 用 
Nodejs 流 进 行 编程 和 不 希望 使 用 shell 脚本 的 设计 师 和 开发 者 应 该 选用 Grunt 满足 他 们 的 
工作 流 需求 。 


4. 何 时 使 用 Gulp 


通过 采用 约定 优 于 配置 的 哲学 ，Gulp 有 利于 喜欢 使 用 异步 Nodejs 流 的 开发 者 和 程序 
员 。 尽 管 开源 社区 一 直 在 扩展 插件 的 选择 范围 , 但 是 Gulp 使 得 直接 使 用 底层 插件 库 编写 任 
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务 这 件 事变 得 非常 简单 ， 从 而 减少 工作 流 和 构建 系统 的 依赖 数量 。 再 结合 Gulp 的 Node.js 
流 的 使 用 ， 可 以 帮助 我 们 保持 构建 系统 快速 、 轻 量 级 和 易于 管理 。 需 要 使 用 复杂 工作 流 自 
动 化 工具 和 已 经 采用 了 约定 优 于 配置 哲学 的 开发 者 应 该 倾向 于 使 用 Gulp， 而 不 是 Grunt 和 
Make。 

到 目前 为 止 本 章 已 经 讲解 了 如 何 使 用 Grunt 和 Gulp 自动 执行 工作 流 , 并 了 解 了 如 何 为 
大 量 使 用 shell 或 者 自动 化 需求 更 简单 的 项 目 在 JavaScript 上 下 文中 使 用 Make。 剩 下 要 讨 
论 的 是 构建 系统 自动 化 。 在 下 一 节 , 将 浏览 一 个 新 的 工具 并 基于 所 学 到 的 Grunt 和 Gulp 知 
识 构建 系统 自动 化 ， 而 这 个 工具 可 以 搭建 复杂 的 构建 管道 任务 ， 支 持 连结 、 缩 小 、 混 淆 和 
测试 工具 执行 。 


2.5 Yeoman 


Yeoman 是 一 个 开源 搭建 工具 ， 它 可 以 帮助 使 用 合理 的 默认 设置 启动 新 的 项 目 ， 并 强制 
使 用 最 佳 实践 ， 并 使 用 一 些 在 开发 现代 Web 应 用 时 可 以 使 我 们 保持 高 生产 率 的 工具 。 
Yeoman 通 过 支持 一 个 生成 器 的 生态 系统 来 完成 这 一 点 ， 可 以 使 用 yo 命令 运行 这 些 插件 ,用 
于 搭建 完整 的 项 目 或 者 有 用 的 部 分 。 对 于 熟悉 Ruby on Rails 开 发 的 开发 者 来 说 ， 这 个 过 程 
类 似 于 rails generate 命 令 。 使 用 Yeoman 命 令 行 工具 生成 的 项 目 将 得 到 一 个 健壮 、 成 熟 的 客 
户 端 栈 的 支持 ， 这 个 栈 由 一 些 工具 和 框架 组 成 ， 而 这 些 工具 可 以 帮助 我 们 快速 构建 出 美丽 
的 Web 应 用 。 

“Yeoman 工 作 流 ” 吸 取 了 几 个 开源 社区 的 成 功 和 教训 ， 所 以 可 以 放心 我 们 的 开发 栈 是 
非常 智能 的 。Yeoman 工 作 流 由 一 个 搭建 工具 (yo)、 构 建 工 具 (grunt 和 gulp) 以 及 包 管 理 器 
(bower 和 npm) 组 成 。Yeoman 将 使 用 这 些 工具 避免 手动 创建 新 的 项 目 时 所 涉及 的 复杂 任务 ， 
从 而 使 我 们 专注 于 构建 应 用 来 提高 开发 生产 力 和 满意 度 。 


2.5.1 开始 使 用 Yeoman 


在 开始 使 用 Yeoman 搭建 项 目 之 前 ， 首 先 必 须 安装 一 个 生成 器 。 出 于 本 章 的 目的 ， 将 
浏览 由 Yeoman 团队 维护 的 官方 AngularJS 生成 器 ， 在 网 址 http://yeoman.io/generators/ 中 还 
可 以 找到 官方 和 社区 维护 的 生成 器 的 完整 列表 。 为 了 开始 使 用 该 生成 器 ， 简 单 地 运行 下 面 
的 命令 即 可 : 


npm install -g generator-angulare0.9.8 


2.5.2 ”搭建 新 的 项 目 

项 目 搭建 过 程 对 于 所 有 Yeoman 生成 器 来 说 都 是 非常 简单 的 。 简 单 地 创建 一 个 新 的 目 
录 , 使 用 命令 行 浏览 至 该 目录 , 然后 运行 yo 命令 使 用 目标 生成 器 。 通常 这 是 一 个 生成 器 名 
字 中 跟 在 generator- 前 级 之 后 的 部 分 。 因 为 本 章 已 经 安装 了 AngularJS 生成 器 ， 下 面 的 命令 
将 启动 新 项 目的 搭建 过 程 : 


yo angular 
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此 时 ， 大 多 数 生成 器 将 显示 出 一 些 提示 ， 用 于 帮助 我 们 配置 如 何 使 用 Yeoman 搭建 新 
的 项 目 。generator-angular 正 是 如 此 , 开始 的 一 些 提示 将 询问 我 们 是 否 希望 包含 Sass、Twitter 
的 Bootstrap 框架 以 及 一 些 常 用 的 AngularJS 模块 。 出 于 本 节 的 目的 ， 请 为 每 个 提示 按 下 回 
车 键 ， 从 而 使 Yeoman 可 以 生成 必要 的 文件 并 安装 必需 的 依赖 ， 用 于 支持 工作 流 的 改进 。 
因为 AngularJS 生成 器 将 使 用 Grunt 自动 执行 所 有 的 工作 流 和 构建 系统 任务 ， 所 以 接 下 来 
将 简单 讨论 每 个 插件 以 及 相关 的 任务 (因为 它们 将 出 现在 新 生成 的 Gruntfiles.js 文件 中 )。 


2.5.3 ”浏览 插件 和 任务 


如 之 前 提 到 的 ，Yeoman 通过 创建 一 个 可 以 改善 开发 者 生产 力 和 满意 度 的 工作 流 促进 
最 佳 实践 。 通 过 精心 配置 构建 系统 工具 中 的 一 个 (Grunt 或 者 Gulp) 和 一 组 用 于 处 理 自动 化 本 
地 开发 、 测 试 和 生产 打包 的 任务 ， 从 而 实现 工作 流 的 改进 。 随 着 时 间 的 推移 ， 在 被 生成 的 
工作 流 任务 的 背后 的 想法 可 能 会 改变 。 不 过 ， 本 节 的 目标 是 帮助 读者 熟悉 由 Yeoman 提供 
的 各 种 意见 ， 从 而 可 以 决定 哪 种 意见 更 适合 未 来 的 某 个 项 目 。 接 下 来 描述 的 与 插件 相关 的 
内 容 将 被 用 作 在 构建 现代 Web 应 用 时 使 用 智能 工作 流 可 以 完成 的 任务 类 型 的 样 例 。 


注意 : 

由 于 所 生成 的 Gruntfile.js( 在 下 一 节 讨论 ) 的 长 度 问 题 ,每 个 任务 的 配置 代码 都 已 经 被 故 
意 忽略 掉 了 。 不 过 ， 如 果 和 希望 继续 使 用 之 前 的 项 目 ， 而 不 是 显 式 地 生成 一 个 新 的 项 目 ， 那 
么 本 章 附带 的 代码 中 的 yeoman/ 目 录 包 含 了 由 AngularJS 生成 器 搭建 的 整个 项 目 。 确保 在 尝 
试 执行 工作 流 任 务 之 前 ， 先 在 命令 行 中 从 该 目录 运行 npm install && bower install。 


1.load-grunt-tasks 


如 本 章 之 前 Grunt 一 节 提 到 的 ， 该 插件 将 负责 加 载 本 工作 流 所 需 的 、 由 各 种 不 同 插件 
公开 的 所 有 Grunt 任务 ， 它 们 都 被 添加 到 了 package.jjson 文件 的 devDependencies 对 象 中 。 
引用 出 现在 第 13 行 , 可 在 网 址 https://github.com/sindresorhus/load-grunt-tasks 中 查看 该 插件 
的 文档 。 


2. time-grunt 


time-grunt 插件 并 未 公开 任何 一 个 任务 , 但 它 将 在 命令 行 中 使 用 一 种 清晰 的 格式 输出 所 
有 Grunt 任务 已 使 用 的 执行 时 间 。 在 调试 配置 不 佳 的 任务 或 者 尝试 优化 构建 系统 时 ， 这 是 
极其 有 用 的 。 可 以 在 网 址 https://github.com/sindresorhus/time-grunt 中 找到 该 插件 的 文档 。 


3. grunt-newer 


该 插件 将 与 执行 文件 操作 的 任务 (需要 使 用 src 和 dest 配 置 属性 ) 一 起 使 用 。 它 公开 newer 
任务 ， 该 任务 不 要 求 使 用 特殊 的 配置 ， 但 是 它 可 以 成 为 其 他 任务 调用 的 前 级 ， 从 而 减少 由 
构建 系统 执行 的 文件 操作 的 数量 。 例 如 ， 可 将 该 插件 与 JShint linter 一 起 使 用 : 
newer:jshint:all。 当 该 任务 第 一 次 运行 时 , 所 有 的 源 代码 都 将 执行 lint 操作 , 但 是 在 此 之 后 ， 
只 有 被 修改 的 文件 才 会 被 这 个 linter 所 处 理 。 可 以 在 网 址 https://github.comytschaub/ 
grunt-newer 中 找到 该 插件 的 完整 文档 。 
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4. grunt-contrib-watch 


该 插件 公开 一 个 watch 任务 ， 该 任务 将 在 运行 目标 任务 之 前 监视 指定 的 文件 是 否 发 生 
过 改动 。 它 的 配置 我 们 已 经 讨论 过 了 ， 这 次 唯一 的 区 别 就 是 出 现 了 一 些 新 的 目标 : bower、 
jsTest、compass 和 gruntfile。 这 些 新 的 目标 将 分 别 负责 重新 链接 前 端 依赖 、 重 新 运行 单元 
测试 、 将 Sass 编译 成 CSS 和 重启 构建 系统 。 关 于 更 多 相关 信息 ， 请 访问 网 址 
https://github.com/gruntjs/grunt-contrib-watch。 


5. grunt-contrib-connect 


另外 在 前 一 节 中 讨论 过 ， 该 插件 公开 一 个 connect 任务 ， 它 将 启动 一 个 超 文本 传输 协 
议 (HTTP) 服 务 器 用 于 提供 本 地 资产 。 该 Gruntfilejs 文件 的 任务 配置 包含 了 提供 单元 测试 
(test) 和 预览 生产 构建 文件 (dist) 的 额外 目标 。 该 插件 的 完整 文档 由 Grunt 核心 团队 所 维护 ， 
地 址 为 https://github.com/gruntjs/grunt-contrib-connect。 


6. grunt-contrib-jshint 


如 本 章 之 前 所 配置 的 ， 该 插件 公开 一 个 jshint 任务 ， 用 于 通过 JSHint linting 工具 运行 
JavaScript 文件 。 这 一 次 , 任务 配置 中 包含 了 一 个 额外 的 目标 , 专门 用 于 对 相关 的 JavaScript 
单元 测试 文件 执行 Lint 操作 。 关 于 grunt-contrib-jshint 插件 的 更 多 文档 ， 请 访问 网 址 
https://github.com/gruntjs/grunt-contrib-jshint。 


7. grunt-contrib-clean 


该 插件 公开 一 个 clean 任 务 ， 它 对 于 移 除 不 需要 的 文件 和 目录 来 说 是 非常 有 用 的 。 如 果 
查看 该 任务 的 配置 的 话 ， 你 会 注意 到 它 已 经 被 创建 用 于 移 除 .tmp/ 和 dist/ 目 录 。Yeoman 使 
用 .tmp/ 目 录 存 储 需要 被 多 个 任务 处 理 的 文件 (例如 混淆 和 连结 )， 并 将 打包 应 用 构建 到 dist/ 
目录 中 。 因 为 这 些 目 录 都 是 自动 生成 的 ， 所 以 最 佳 实践 表示 需要 使 用 一 种 方式 在 两 次 构建 过 
程 之 间 清 除 它 们 。 更 多 相关 信息 请 访问 https://github.com/gruntjs/grunt-contrib-clean。 


注意 : 

你 可 能 已 经 注意 到 generator-angular 为 Gruntfilejs 文件 在 任务 配置 中 生成 的 <%= 
yeoman.app %> 和 <%= yeoman.dist %>。Yeoman 将 使 用 这 些 模板 ， 从 而 允许 我 们 配置 适合 
自己 的 项 目 目 录 结 构 。 在 Gruntfilejs 文件 的 顶部 找到 appConfig 对 象 ， 其 中 包含 了 Yeoman 
使 用 它 泻 染 通过 各 种 不 同 任务 配置 引用 的 模板 。 


8. grunt-autoprefixer 


Autoprefixer 是 一 个 独立 工具 ， 它 将 使 用 Can I Use(http://caniuse.com/) 数 据 库 解 析 CSS 
并 添加 以 供应 商 作为 前 级 的 CSS 属性 。 该 插件 公开 一 个 autoprefixer Grunt 任务 ,通过 它 可 
以 配置 autoprefixer 的 工作 方式 默认 情况 下 ,Yeoman 将 把 任务 级 别 options 对 象 的 browsers 
属性 设置 为 last 1 version。 如 果 项 目 需要 支持 旧版 浏览 器 , 可 修改 该 设置 。grunt-autoprefixer 
插件 所 有 可 用 选项 的 详细 解释 如 文档 https://github.com/nDmitry/grunt-autoprefixer 所 示 。 
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9. grunt-wiredep 


Wiredep 是 一 个 独立 工具 , 它 将 把 依赖 连接 到 源 代 码 中 。 该 插件 公开 一 个 wiredep Grunt 
任务 , 该 任务 允许 我 们 在 源 代码 中 直接 注入 Bower 包 , 作为 Grunt 工作 流 的 一 部 分 。Yeoman 
已 经 配置 了 该 任务 来 查看 主 index.html 文件 ，wierdep 将 解析 注释 ,注释 告诉 它 注入 依赖 的 
位 置 。 幸 亏 ，Yeoman 也 已 经 添加 了 必需 的 注释 。 对 于 JavaScript 依赖 ， 使 用 的 是 bower: 
js， 而 CSS 依赖 则 使 用 bower: css 注入 。 这 两 种 注释 块 都 必须 使 用 一 个 endbower 注释 作为 
结尾 ， 并 且 在 这 些 注 释 块 之 前 什么 也 不 应 该 插入 ， 因 为 wiredep 将 使 用 bowerjson 文件 中 
定义 的 依赖 覆 写 这 些 内 容 。 关 于 支持 选项 的 完整 列表 ， 请 访问 网 址 https://github.com/ 
stephenplusplus/grunt-wiredep。 


10. grunt-contrib-compass 


该 插件 公开 一 个 compass Grunt 任务 ， 它 将 配置 独立 工具 Compass 被 集成 到 工作 流 中 
的 方式 。Compass 是 一 个 开源 的 编写 框架 , 它 将 把 Sass 文件 编译 成 CSS 文件 。 该 插件 要 求 
已 经 在 机 器 中 安装 了 Ruby、Sass 和 Compass。Yeoman 已 经 创建 了 compass 任务 ， 用 于 寻 
找 指定 应 用 根 目录 的 styles/ 目 录 中 的 Sass 文件 。 如 果 希 望 改变 这 个 行为 ， 那 么 简单 地 修改 
该 任务 适当 的 配置 选项 即 可 。 关 于 更 多 详细 信息 请 访问 该 插件 的 仓库 ， 地 址 为 
https://github.com/gruntjs/grunt-contrib-compass。 


11. grunt-filerev 


该 插件 公开 一 个 filerev 任务 ， 它 提供 了 配置 选项 ， 用 于 支持 通过 文件 内 容 哈 希 的 方式 
集成 静态 资产 修订 ， 作 为 工作 流 的 一 部 分 。 在 部 署 应 用 到 生产 环境 时 ， 这 是 一 个 良好 的 实 
践 ， 因 为 我 们 对 如 何 缓存 资产 有 着 更 好 的 控制 。 当 新 的 版 本 生成 时 ， 优 化 后 的 应 用 文件 将 
使 用 不 同 的 哈 希 作为 后 级， 从 而 使 缓存 清除 策略 生效 。 默 认 情 况 下 ，Yeoman 配置 了 这 个 
任务 , 用 于 修订 所 有 的 脚本 、 样 式 、 图 片 和 字体 。 关于 更 多 信息 ,可 访问 https://github.com/ 
yeoman/ grunt-filerev。 


12. grunt-usemin 


该 插件 将 把 一 组 HTML 文件 (或 者 任何 模板 /视图 ) 中 的 未 优化 脚本 、 样 式 表 和 其 他 资产 
的 引用 替换 为 优化 后 的 版 本 。 为 此 ,Gruntfilejs 文件 中 的 配置 公开 了 useminPrepare 和 usemin 
任务 。 还 记得 filerev 任务 是 如 何 创建 资产 的 修订 副本 的 吗 ? grunt-usemin 插件 允许 我 们 添 
加 配置 块 (类 似 于 wiredep 所 使 用 的 配置 块 ), 用 于 指定 如 何 替换 源 代码 中 的 修订 后 和 优化 后 
的 资产 版 本 。 如 果 查 看 index.html 文件 的 话 ， 我 们 应 该 注意 到 wiredep 所 使 用 的 bower:js 
块 被 一 个 包含 了 build:js(.) scripts/vendorjs 的 注释 包围 了 起 来 。 这 将 指示 usemin 从 任何 该 
注释 块 中 包含 的 JavaScript 文件 创建 一 个 vendorjs 文件 (在 本 例 中 就 是 我 们 的 Bower 依赖 )， 
该 注释 块 以 endbuild 注释 结尾 。 在 index.html 文件 的 底部 , 可 以 看 到 类 似 的 usemin 注释 块 ; 
它 将 用 于 为 所 有 应 用 的 自 定义 JavaScript 文件 编译 一 个 scriptsjs 文件 。 

useminPrepare 任务 将 更 新 Grunt 配置 ,在 适当 的 注释 构建 块 中 包装 的 文件 应 用 转换 流 。 
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默认 情况 下 ，usemin 配置 了 concat 和 uglify 任务 ， 它 们 分 别 是 由 grunt-contrib-concat 和 
grunt-contrib-uglify 插件 公开 的 。 这 两 个 任务 将 负责 结合 所 有 的 JavaScript 文件 (如 usemin 
构建 块 所 定义 的 ), 并 通过 UslifyJS 运行 它 来 混淆 结果 。 Yeoman 还 添加 了 来 自 grunt-contrib- 
cssmin 插件 的 cssmin 任务 作为 工作 流 的 一 部 分 ， 它 将 负责 压缩 CSS 文件 。 

usemin 任务 将 使 用 单个 “总 结 ” 行 蔡 换 所 有 的 块 ， 指 向 由 转换 流 创建 的 文件 。 然 后 它 
将 寻找 资产 的 引用 ， 并 使 用 修订 版 本 (由 filerev 任务 创建 ) 替 换 它们 。 使 用 grunt-usemin 插 
件 的 结果 是 工作 流 得 到 了 连接 、 混 淆 、 缩 小 和 修订 源 文件 的 能 力 。 需 要 指出 ， 如 有 必要 ， 
可 以 手动 配置 concat、uglify 和 cssmin 任务 。 通 过 该 插件 ， 基 于 index.html 文件 中 的 注释 
构建 块 配置 这 些 任 务 ， 用 于 管理 转换 流 将 变 得 更 加 容易 。 关 于 更 多 信息 ， 包 括 额外 转换 流 
的 样 例 ， 可 访问 插件 文档 https://github.com/yeoman/grunt-usemin。 


13. grunt-contrib-imagemin 


该 插件 公开 imagemin 任务 , 通过 它 可 以 使 用 gifsicle (压缩 GIF)、jpegtran (压缩 JPEG)、 
optipng( 压 缩 PNG) 和 svgo (压缩 SVG) 图 片 优 化 器 压缩 应 用 图 片 。 优 化 器 与 插件 绑 定 在 一 起 ， 
所 以 不 需要 在 机 器 上 安装 它们 。Yeoman 配 置 了 imagemin 任务 ,用 于 在 应 用 根 目录 的 images/ 
目录 中 寻找 图 片 , 但 可 以 按照 需求 修改 这 个 行为 。 关于 该 插件 可 用 的 压缩 选项 的 完整 列表 ， 
可 访问 文档 https://github.com/gruntjs/grunt-contrib-imagemin。 


14. grunt-svgmin 


尽管 从 技术 角度 看 ， 可 以 使 用 grunt-contrib-imagemin 插件 来 压缩 SVG， 但 是 Yeoman 
默认 还 包含 grunt-svgmin 插件 ， 通 过 公开 的 svgmin Grunt 任务 为 SVG( 可 伸缩 向 量 图 形 ) 压 
缩 过 程 提 供 了 更 精细 的 控制 。 该 插件 还 使 用 了 svgo 优化 器 ， 在 处 理 更 加 复杂 的 SVG 图 片 
时 是 非常 有 用 的 。 可 以 在 https://github.com/sindresorhus/grunt-svgmin 中 找到 所 有 可 用 压缩 
选项 的 列表 。 


15. grunt-contrib-htmlmin 


该 插件 将 使 用 html-minifier 开源 工具 来 压缩 HTML 文件 ， 这 是 一 个 高 度 可 配置 的 、 经 
过 良好 测试 的 、 基 于 JavaScript 的 缩小 器 。 该 缩小 器 可 以 使 用 Grunt 公开 的 htmlmin 任务 进 
行 配 置 ，Yeoman 已 经 提供 了 该 任务 而 且 使 用 了 一 些 默认 的 选项 (collapseWhitespace、 
removeOptionalTags 等 )。 为 了 学 习 更 多 关于 如 何 通过 Grunt 将 配置 选项 传递 给 捆绑 的 
html-minifier 的 内 容 ， 可 查看 文档 https://github.com/gruntjs/grunt-contrib-htmlmin。 


16. grunt-ng-annotate 


该 插件 是 基于 命令 行 工具 ng-annotate 构 建 的 ， 而 这 个 工具 可 以 添加 、 删 除 和 重建 
AngularJS 依 赖 注入 注解 。 默 认 情况 下 ，ngAnnotate 任 务 通 过 自动 为 依赖 注入 使 用 “详细 格 
式 ” 的 方式 ， 尝 试 使 AngularJS 代 码 在 经 过 压缩 后 也 是 安全 的 。 如 果 是 第 一 次 遇 到 AngularJS 
注解 ， 那 么 下 面 是 一 个 正常 情况 下 不 使 用 注解 时 的 代码 : 


angular.module ("MyApp") .controller ("MyCtrl", function($scope, $timeout) { 
i 
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由 于 AngularJS 处 理 依赖 注入 的 本 性 ， 在 缩小 这 段 代码 之 后 ， 应 用 可 能 遭 到 破坏 。 因 此 
必须 使 用 下 面 的 “详细 格式 ” 这样 应 用 在 缩小 过 程 之 后 可 以 正确 运行 : 
angular.module ("MyApp") .controller ("MyCtrl", ["$scope", "$timeout", 


function($scope, $timeout) { 
Ds 


尽管 可 手动 地 使 用 这 种 详细 格式 , 但 随 着 代码 库 的 增长 , 这 会 变 得 乏味 而 且 易于 出 错 。 
Yeoman 通 过 使 用 grunt-ng-annotate 插 件 自动 将 代码 转换 成 这 种 形式 (在 运行 uglify 任 务 之 前 ， 
由 usemin 配 置 的 ) 的 方式 避免 了 这 个 问题 ， 从 而 确保 在 为 生产 环境 压缩 之 后 ， 应 用 代码 不 会 
遭 到 破坏 。 可 在 网 址 https://github.com/mzgol/grunt-ng-annotate 中 找到 ngAnnotate 任 务 的 更 
多 信息 和 用 例 。 


17. grunt-google-cdn 


该 插件 公开 了 cdnify 任务 , 它 将 允许 我 们 使 用 Google Content Delivery Network (CDN) 
中 托管 的 资源 替换 本 地 JavaScript 引用 。 根 据 生产 环境 的 不 同 ， 通 过 允许 Google 服务 器 提 
供 一 些 供应 商 JavaScript 文件 (例如 AngularJS 库 自 身 ) 的 方式 ， 降 低 发 布 应 用 的 服务 器 所 需 
的 带宽 这 可 能 是 一 个 优点 。 如 果 这 不 是 生产 环境 所 需 的 功能 ， 那 么 可 以 轻松 地 删除 这 个 任 
务 ， 如 本 章 稍 后 “修改 ”一 节 所 描述 的 。 关 于 更 多 信息 ， 可 访问 插件 文档 https://github.com/ 
btford/grunt-google-cdn。 


18. grunt-contrib-copy 


该 插件 公开 了 可 配置 的 copy 任务 , 通过 它 可 以 轻松 地 在 Grunt 工作 流 中 复制 其 中 定义 
的 文件 和 文件 夹 。 在 本 例 中 ，Yeoman 已 经 配置 了 该 任务 ， 用 于 将 生产 环境 所 需 的 资产 复 
制 到 dist/ 目 录 中 , 并 将 需要 自动 添加 前 级 的 样式 添加 到 .tmp/ 目 录 中 。 关 于 copy 任务 的 更 多 
信息 ， 可 访问 https://github.com/gruntjs/grunt-contrib-copy。 


19. grunt-concurrent 


该 插件 公开 concurrent 任务 , 它 主要 被 用 于 优化 构建 过 程 .并 行 地 运行 像 Coffee 和 Sass 
这 样 缓慢 的 任务 可 以 明显 地 缩短 构建 时 间 。 

Yeoman 使 用 这 个 任务 正 是 出 于 这 个 目的 ， 在 为 生产 环境 构建 应 用 时 并 行 运行 图 片 优 
化 任务 。 如 果 需 要 同时 运行 多 个 阻塞 任务 ， 例 如 nodemon 和 watch， 那 么 concurrent 任务 
也 是 非常 有 用 的 。 关 于 更 多 信息 ， 可 访问 https://github.com/sindresorhus/grunt-concurrent。 


20. grunt-karma 


AngularJS Yeoman 生成 器 将 使 用 generator-karma 生成 器 在 test/ 目 录 中 搭建 karma.confjs 
文件 的 主干 。Karma 是 由 AngularJS 团队 创建 的 一 个 开源 JavaScript 测试 运行 器 。 另 外 ， 该 
生成 器 还 允许 使 用 node_modules/karma/bin/ 目 录 中 的 二 进 制 文件 运行 Karma 测试 ， 不 过 如 
果 希 望 通过 Grunt 调用 测试 工具 ， 那 么 还 必须 安装 grunt-karma 插件 ， 可 运行 下 面 的 命令 : 
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npm install --save-dev grunt-karma 

通过 该 命令 ， 可 以 正确 地 调用 别名 任务 用 于 测试 应 用 ， 接 下 来 将 进行 讲解 。 关 于 
grunt-karma 插件 的 更 多 信息 ,可 访问 官方 文档 https://github.com/karma-runner/grunt-karma。 
2.5.4 别名 任务 和 工作 流 

尽管 我 们 直接 在 命令 行 中 运行 之 前 提 到 的 插件 任务 ， 但 是 让 Yeoman 工作 流 真 正 脱 颖 


而 出 的 是 : 通过 别名 任务 可 以 将 所 有 任务 组 合 在 一 起 。4 个 主要 的 工作 流 任务 都 在 所 生成 
的 Gruntfilejs 文件 底部 ， 接 下 来 将 进行 详细 讲解 。 


1. serve 


grunt serve 任务 的 功能 类 似 于 本 章 之 前 创建 的 任务 。 运 行 该 任务 将 清除 临时 文件 、 连 
接 Bower 依赖 、 运 行 Sass 编译 器 、 自 动 为 CSS 添加 前 级 、 启 动 在 线 重新 加 服务 器 并 监视 
应 用 文件 的 改动 。 不 过 它 与 之 前 我 们 所 创建 的 任务 有 一 个 关键 的 区 别 : Yeoman 创建 的 这 
个 任务 将 接受 一 个 额外 的 参数 。 如 果 运 行 grunt serve:dist，Grunt 在 启动 连接 服务 器 之 前 将 
首先 为 生产 环境 构建 应 用 (指向 dist/ 目 录 )， 这 样 我 们 就 可 以 预览 压缩 应 用 。 


2. test 


grunt test 是 一 个 别名 任务 ， 它 将 在 调用 karma 任务 以 singleRun 方式 运行 测试 工具 之 
前 ,启动 指向 单元 测试 的 连接 服务 器 .因为 由 Yeoman 创建 的 package.json 文 件 将 设置 scripts 
对 象 的 test 属性 用 于 运行 grunt test， 所 以 我 们 也 可 以 从 命令 行 中 运行 npm test 来 调用 整个 
测试 工具 ,值得 一 提 的 是 , 生成 的 test/karma.confjs 文件 开始 时 被 配置 为 使 用 PhantomJS( 一 
个 无 头 WebKit 浏 览 器 ) 运 行 测试 工具 。 关 于 配置 Karma 的 帮助 信息 ,可 访问 文档 http://Karma- 
runner.github.i0/0.8/config/configuration-file.html。 


3. build 


Yeoman 配置 的 别名 任务 grunt build 将 负责 压缩 AngularJS 应 用 ,并 为 生产 环境 做 准备 。 
该 任务 首先 将 清除 临时 文件 ， 然 后 连接 Bower 依赖 、 准 备 usemin、 并 行 运行 Sass 和 图 片 
优化 器 、 自 动 为 CSS 添加 前 级 、 连 结 JavaScript、 复 制 应 用 资产 到 dist/、 使 用 CDN 版 本 替 
换 脚 本 引用 、 缩 小 CSS、 缩 小 脚本 、 修 订 资产 并 最 终 缩小 HIML。 尽 管 在 这 个 过 程 中 还 有 
许多 任务 将 被 调用 ， 但 是 grunt build 任务 的 最 终 输出 将 是 一 个 单独 的 dist/ 目 录 ， 它 可 以 被 
部 署 到 所 选 的 服务 器 ， 并 为 生产 环境 做 好 准备 。 


4. default 


如 本 章 之 前 所 提 到 的 ， 从 命令 行 中 运行 grunt 且 未 指定 任务 参数 时 将 触发 默认 别名 任 
务 . 在 本 例 中 ,Yeoman 已 经 创建 了 默认 任务 ,以便 在 测试 和 构建 应 用 生产 包 之 前 对 JavaScript 
文件 执行 Lint 操 作 。 可 以 轻松 地 修改 该 命令 以 符合 个 人 需求 ， 但 是 在 修改 build 任 务 时 要 小 
心 ， 因 为 任务 调用 的 顺序 非常 重要 。 
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2.5.5 修改 


Yeoman 生成 的 工作 流 被 设置 为 模块 化 的 和 可 伸缩 的 。 尽 管 生 成 器 是 固定 的 ， 但 是 包 
含 或 者 排除 哪个 任务 则 完全 是 由 个 人 决定 的 。 如 果 希 望 从 工作 流 中 移 除 一 个 任务 ， 可 从 
已 配置 的 Gruntfilejs( 或 者 Gulpfilejs) 中 删除 它 ， 并 从 项 目 中 卸载 相关 联 的 插件 即 可 。 例 
如 ， 如 果 和 希望 移 除 由 grunt-google-cdn 插件 公开 的 cdnify 任务 ， 可 运行 下 面 的 命令 从 项 目 
中 印 载 它 : 


npm uninstall grunt-google-cdn --save-dev 


该 命令 将 从 node_modules/ 文 件 夹 中 移 除 插件 ， 并 更 新 packagejson， 从 而 使 插件 不 再 
出 现在 开发 依赖 中 。 从 工作 流 中 移 除 任务 时 ， 要 注意 任务 依赖 。 如 果 其 他 任务 的 配置 块 中 
引用 了 被 删除 的 任务 ， 那 么 任务 运行 器 将 在 执行 过 程 中 抛 出 一 个 错误 。 为 了 避免 工作 流 错 
误 ， 在 初始 的 搭建 过 程 完成 之 后 确保 删除 了 要 删除 的 任务 的 所 有 引用 。 


2.5.6 子 生成 器 


一 些 Yeoman 生成 器 还 提供 了 一 个 或 多 个 子 生成 器 ， 可 以 使 用 它们 在 创建 项 目 之 后 拱 
建 一 些 有 用 的 组 件 。 例 如 ， 已 安装 的 AngularJS 生成 器 提供 了 额外 的 子 生成 器 ， 可 以 通过 
下 面 的 方式 调用 : 

® controller—yo angular:controller user 
directive 一 一 yo angular:directive myDirective 
filter 一 一 yo angular:filter myFilter 
route 一 一 yo angular:route myroute 
Service 一 一 yo angular:service myService 
decorator 一 一 yo angular:decorator serviceName 

® _ View 一 一 yo angular:View user 

这 些 子 生成 器 将 通过 创建 新 的 文件 (或 者 更 新 现 有 文件 )、 创 建 额外 的 单元 测试 骨干 (在 
必要 的 时 候 ) 并 将 已 生成 文件 连接 到 index.html 中 的 方式 为 应 用 搭建 新 的 AngularJS 组 件 。 
这 意味 着 在 工作 流 系统 运行 时 ， 调 用 之 前 的 某 一 个 命令 将 如 预期 触发 适当 的 监视 目标 ， 允 
许 我 们 无 颖 地 在 应 用 中 添加 新 的 组 件 ， 而 不 会 影响 工作 流 的 速度 。 关 于 官方 AngularJS 生 
成 器 和 它 所 包含 的 子 生成 器 的 更 多 信息 ， 可 访问 官方 文档 https://github.com/yeoman/ 


generator-angular。 
2.5.7 ”流行 的 生成 器 


本 节 的 目的 是 浏览 由 Yeoman 推进 的 、 开 发 AngularJS 应 用 上 下 文中 的 工作 流 和 自动 
化 构建 系统 。 专 注 于 官方 Yeoman 生成 器 是 合理 的 ， 但 是 其 他 流行 的 AngularJS 生成 器 也 
值得 一 提 。 


1. angular-fullstack 
这 个 Yeoman 生成 器 是 官方 AngularJS 生成 器 的 分 支 ， 因 此 它 包 含 了 所 有 相同 的 功能 。 
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不 过 ， 它 修改 了 搭建 项 目的 目录 结构 ， 在 其 中 包含 了 Express 服务 器 。 对 于 有 兴趣 试验 
MongoDB、Express、Angular 和 Node(MEAN) 栈 的 读者 ， 这 个 生成 器 是 一 个 良好 的 起 点 。 
在 命令 行 中 运行 下 面 的 命令 安装 它 : 

npm install -9 generator-angular-fullstack 

创建 一 个 新 的 项 目 目录 ， 浏 览 该 目录 ， 并 运行 yo angular-fullstack 创建 一 个 新 的 应 用 。 
要 了 解 更 多 信息 可 访问 https://github.com/DaftMonk/generator-angular-fullstack。 


2. jhipster 


对 于 喜爱 使 用 Java 编写 后 端 服务 的 全 栈 开发 者 来 说 , 如 果 希 望 使 用 许多 开源 工具 的 目 
标 是 创建 美观 前 端 应 用 的 话 ， 这 个 Yeoman 生成 器 值得 深入 研究 。 通 过 它 可 以 快速 地 创建 
一 个 Spring Boot(http://projects.spring.io/spring-boot/) 项 目 ， 该 项 目 将 使 用 AngularJS 单 页 面 
应 用 和 Yeoman 工作 流 。 在 命令 行 中 运行 下 面 的 命令 安装 它 : 


npm install -g generator-jhipster 


创建 一 个 新 的 项 目 目录 ， 浏 览 该 目录 ， 并 运行 yo jhipster 创建 一 个 新 应 用 。 关 于 更 多 
信息 ， 可 访问 http://jhipster.github.io/。 


3.ionic 


这 个 Yeoman 生成 器 将 帮助 前 端 开发 者 使 用 IonicFramework 构建 混合 移动 应 用 ， 这 是 
一 个 用 于 使 用 HTML5 开发 移动 应 用 的 、 美 观 的 开源 框架 。 除 了 可 以 与 本 章 讨论 的 Yeoman 
工作 流 一 起 使 用 之 外 ， 它 还 规定 了 通过 合理 使 用 Cordova 挂钩 用 于 管理 基于 Cordova 的 项 
目的 最 佳 实践 。 在 命令 行 中 运行 下 面 的 命令 安装 它 : 


npm install -9 generator-ionic 


创建 一 个 新 的 项 目 目录 ， 浏 览 它 ， 并 运行 yo ionic 创建 一 个 新 的 应 用 。 更 多 相关 信息 
请 访问 https://github.com/diegonetto/generator-ionic。 


2.6 小 结 


在 本 章 , 我 们 学 到 了 如 何 使 用 Bower 管理 前 端 依赖 、 如 何 使 用 Grunt 和 Gulp 自动 执行 
开发 任务 、 如 何 使 用 Yeoman 搭建 新 的 项 目 以 及 如 何 通过 采用 一 些 工作 流 最 佳 实践 在 开发 
过 程 中 提高 生产 效率 和 满意 度 。 无 论 将 来 在 AngularJS 项 目 中 是 否 选 用 这 些 工 具 和 实践 ， 
我 们 都 已 经 了 解 了 现代 前 端 开 发 工具 的 现状 。 在 开始 一 个 新 的 项 目 时 ， 为 合适 的 工作 选择 
正确 的 工具 可 能 是 一 个 艰难 的 决定 ， 但 是 通过 本 章 样 例 的 学 习 ， 将 普通 的 、 重 复 任务 进行 
优化 和 自动 化 可 以 使 我 们 在 不 断 变 化 的 前 端 Web 应 用 开发 世界 中 保持 高 效 。 


本 章 内 容 : 

在 AngularJS 组 件 之 间 进 行 通信 
使 用 AngularJS 构造 无 限 滚动 
使 用 AngularJS 模块 运行 A/B 测试 
基于 项 目 规模 构建 应 用 文件 

使 用 模块 加 载 器 组 织 应 用 

构建 用 户 验 证 的 最 佳 实践 


本 章 的 样 例 代码 下 载 : 
可 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选 项 卡 找 到 本 章 的 
wrox.com 代 码 下 载 文件 。 


3.1 架构 如 此 重要 的 原因 


在 开发 任何 一 个 项 目 时 ， 可 读 性 和 可 维护 性 都 是 基本 的 要 求 。 尝 试 为 组 织 和 结构 都 很 
糟糕 的 应 用 贡献 代码 可 能 是 一 个 非常 令 人 肖 丧 的 事情 ,而 且 会 严重 影响 开发 者 的 生产 效率 。 
请 花 一 点 时 间 思 考 如 何 组 织 应 用 的 文件 和 JavaScript 模块 ， 这 可 以 节省 以 后 所 花费 的 时 间 
和 人 金钱， 尤其 是 对 于 一 个 拥有 许多 开发 者 的 大 型 项 目 来 说 。 在 本 章 ， 将 学 习 把 AngularJS 
提供 的 众多 组 件 组 织 在 一 起 的 各 种 技术 ， 它 们 将 使 用 由 社区 强调 的 最 佳 实践 和 约定 。 本 章 
还 将 讲解 在 AnuglarJS 组 件 之 间 高 效 地 进行 数据 通信 的 各 种 技术 ， 从 而 使 将 来 在 设计 应 用 
的 架构 时 可 以 做 出 明智 的 决定 。 

3.2 一 节 将 描述 AngularJS 代码 主要 组 件 的 高 级 概览 : 控制 器 、 服 务 和 指令 。3.3 一 节 
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将 讨论 AngularJS 模块 和 需要 调用 神秘 的 angularmodule() 方 法 的 原因 (在 之 前 的 章节 中 你 可 
能 已 经 见 到 过 它 )。3.4 一 节 将 讲解 几 种 组 织 AngularJS 文件 的 不 同 模式 。3.5 一 节 涵盖 了 两 
个 流行 的 开源 工具 ， 用 于 聚合 和 加 载 各 种 AngularJS 组 件 : RequireJS 和 Browserify。3.6 一 
节 将 把 所 有 的 组 件 组 合 在 一 起 ， 并 在 创建 一 个 通用 用 户 验证 机 制 的 上 下 文中 讨论 之 前 4 个 
小 节 所 涉及 的 概念 。 


3.2 控制 器 、 服 务 和 指令 


将 要 编写 的 大 部 分 AngularJS 代码 都 会 被 包含 在 三 个 组 件 中 的 某 一 个 中 : 控制 器 、 服 
务 或 者 指令 。 每 个 组 件 都 有 自己 独 有 的 属性 。 高 效 的 AngularJS 代码 将 会 利用 这 些 组 件 之 
间 的 区 别 。 本 节 将 提供 对 这 些 内容 的 高 级 概览 : 三 个 组 件 之 间 的 区 别 以 及 它们 是 如 何 相互 
协作 的 。 另 外 ， 我 们 还 将 学 习 如 何在 这 些 不 同 组 件 之 间 共 享 数据 。 

从 高 级 别 来 看 , 这 三 个 组 件 的 关系 如 下 所 示 : 服务 负责 从 远 端 服务 器 抓 取 和 存储 数据 ; 
基于 服务 构建 的 控制 器 将 为 AngularJS 的 作用 域 层 次 提供 数据 和 功能 ， 基 于 控制 器 和 服务 
构建 的 指令 将 直接 与 文档 对 象 模型 (DOM) 元 素 进 行 交互 。 


注意 : 

本 节 只 是 提供 了 一 个 对 控制 器 、 服 务 和 指令 的 粗略 概述 ， 它 将 专注 于 在 AngualrJS 应 
用 上 下 文中 使 用 每 个 组 件 时 所 采用 的 权衡 。 如 果 有 兴趣 学 习 指 令 和 服务 的 更 多 细节 内 容 ， 
那么 第 5 章 “ 指 令 ” 将 详细 讨论 如 何 编 写 自 定义 指令 ,第 7 章 “ 服 务 、 工 厂 和 提供 者 ”将 
讨论 服务 的 设计 模式 。 


3.2.1 控制 器 


控制 器 是 负责 为 超 文 本 标记 语言 (HTML) 公 开 JavaScript 数据 和 函数 的 AngularJS 组 件 。 
通常 ， 在 HTML 中 使 用 ng-controller 指令 实例 化 控制 器 : 


<div ng-controller="MyController"></div> 


注意 : 
本 书 中 一 个 关键 的 、 反 复出 现 的 主题 是 ， 控制 器 将 负责 向 HTML 公开 应 用 编程 接口 。 
然后 像 ngClick 和 ngBind 这 样 的 指令 将 与 该 API 进行 交互 ， 从 而 呈现 出 页 面 的 用 户 体验 。 


控制 器 将 使 用 AngularJS 的 依赖 注入 器 实例 化 ， 这 是 一 个 检测 控制 器 参数 并 按 需 要 构 
建 它们 的 工具 。 因 为 服务 将 使 用 依赖 注入 器 进行 注册 ， 所 以 一 个 控制 器 可 以 使 用 任意 数量 
的 服务 。 不 过 ， 因 为 控制 器 并 未 使 用 依赖 注入 器 进行 注册 ， 所 以 控制 器 和 服务 无 法 把 控制 
器 列 为 依赖 。 例 如 ， 可 以 创建 一 个 名 为 myService 的 服务 ， 然 后 把 它 列 为 MyController 控 
制 器 的 依赖 : 


Var m = angular.module('myModule'); 


m.factory('myService', function() { 


return { answer: 42 }7 


Bs 


m.controller ('MyController', function(myService) { 
// 使 用 myService 


Ds 


不 过 ， 不 可 以 创建 男 一 个 控制 器 或 者 服务 ， 然 后 把 MyController 列 为 依赖 : 


var 


m= angular.module('myModule'); 


m.controller ('MyController', function() { 


1D); 


m.factory('myService2', function(MyController) { 


// 错误 : MyController 未 使 用 依赖 注入 器 进行 注册 


}) 


m.controller('MyOtherController', function(MyController) { 
// 错误 : MyController 未 使 用 依赖 注入 器 进行 注册 


}) 


在 控制 器 中 还 有 两 个 与 服务 相关 的 独特 属性 值得 一 提 。 首 先 ， 每 个 ng-controller 指令 
的 实例 将 创建 一 个 控制 器 的 新 实例 (也 就 是 调用 控制 器 函数 )。 这 与 服务 形成 了 鲜明 对 比 ; 


服务 最 多 
间 共 享 。 


只 会 被 实例 化 一 次 ， 而 且 该 实例 将 在 所 有 依赖 于 该 服务 的 控制 器 、 服 务 和 指令 之 


其 次 ， 除 了 通过 AngularJS 依赖 注入 器 注册 的 服务 之 外 ， 控 制 器 可 以 将 本 地 对 象 列 为 
依赖 。 本 地 对 象 就 是 使 用 依赖 注入 器 为 控制 器 的 特定 实例 注册 的 、 特 定 于 上 下 文 的 对 象 。 
本 地 变量 最 常见 的 样 例 就 是 Sscope 对 象 ， 几 乎 所 有 控制 器 都 将 使 用 它 实现 公开 JavaScript 
函数 和 数据 给 HTML 的 核心 目的 。 对 于 控制 器 而 言 ， 将 本 地 对 象 列 为 依赖 与 把 服务 列 为 依 
赖 并 没什么 区 别 : 


m.controller ('MyController', function($scope) { 
$scope.data = { answer: 42 }; 


1); 


不 过 ， 服 务 无 法 将 本 地 对 象 列 为 依赖 。 下 面 的 代码 将 会 引起 一 个 错误 : 


m.factory('myService', function($scope) { 


// 
1); 


错误 : $scope 未 使 用 依赖 注入 器 进行 注册 


这 就 是 为 什么 控制 器 是 AngularJS 中 把 JavaScript 数据 和 函数 公开 给 HTML 的 主要 工 


具 的 原因 : 控制 器 可 以 访问 $scope， 而 服务 不 可 以 。 不 过 ， 控 制 器 可 以 把 服务 列 为 依赖 并 
将 该 服务 添加 到 它 的 作用 域 中 : 
m.factory('myService', function() { 


return { answer: 42 }; 
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]) 


m.controller ('MyController', function($scope, myService) { 
// 使 作用 域 可 以 访问 myservice 
$scope.myService = myService; 


]}) 


现在 我 们 已 经 了 解 了 控制 器 的 基本 目的 和 独特 属性 ， 接 下 来 将 学 习 如 何在 控制 器 之 间 
共享 数据 。 该 任务 是 引起 AngularJS 初学 者 混淆 的 一 个 常见 来 源 ， 也 是 像 Stack Overflow 
这 样 的 问答 论坛 中 常见 的 讨论 话题 。AngularJS 为 控制 器 之 间 的 通信 提供 了 大 量 的 方法 。 本 
节 将 涵盖 三 个 主要 的 方法 : 作用 域 继承 、 通 过 $scope 广播 事件 和 服务 。 


1. 作用 域 继承 


将 要 学 习 的 第 一 种 控制 器 间 的 通信 方式 是 : 使 用 AngularJS 骨 套 作用 域 的 能 力 。 第 4 
章 “ 数 据 绑 定 ” 将 对 作用 域 和 作用 域 继承 进行 详细 讲解 。 不 过 ， 出 于 本 节 的 目的 ， 知 道 
ng-controller 的 每 个 实例 都 将 创建 一 个 新 的 作用 域 ， 而 且 ng-controller 指令 的 媒 套 实例 将 创 
建 嵌 套 的 作用 域 即 可 : 


<div ng-controller="MyController" 
ng-init="answer = 42;"> 
<hl>This is the parent scope</h1l> 
<div ng-controller="MyController"> 
<h2>This scope inherits from the parent scope</h2> 
This prints '42': {{ answer }} 
</div> 
</div> 


这 意味 着 子 作 用 域 可 以 访问 声明 在 它们 的 祖先 作用 域 中 的 变量 和 函数 。 这 在 HIML( 如 
之 前 所 示 ) 和 控制 器 中 都 是 真 的 。 例 如 下 面 的 HTML: 


<div ng-controller="Controllerl"> 
<div ng-controller="Controller2"> 
This prints '42': {{ answer }} 
</div> 
</div> 


实际 上 ， 可 以 在 Controller2 控制 器 中 访问 变量 $scope.answer。 


m.controller('Controllerl', function($scope) { 
$scope.answer = 42; 
1D); 


m.controller('Controller2', function($scope) { 


// 如 果 $scope 是 Controller1l 操作 的 作用 域 的 后 代 ， 这 里 将 输出 “42” 


console.1og($scope.answer) 
]}) 


这 似乎 微不足道 ， 但 是 我 们 已 经 成 功 地 在 两 个 完全 分 离 的 控制 器 之 间 共 享 了 数据 。 不 


过 ， 这 种 方式 有 一 个 限制 : 现在 Controller2 将 隐 性 依赖 于 Controllerl 。 特 别 是 ， 现 在 使 用 
Controller2 时 需要 特别 注意 : 不论 Controllerl 是 否 存在 它 都 应 该 能 正常 工作 ， 或 者 需要 特 
别 小 心 永远 不 应 该 在 Controllerl 不 存在 时 使 用 Controller2。 而 且 ， 可 以 想象 现在 有 一 个 更 
加 复杂 的 样 例 ，Controllerl 将 从 远程 服务 器 中 加 载 answer 变量 : 那么 如 何 将 Contoller2 中 
可 能 发 生 的 错误 与 Controllerl 进行 沟通 呢 ? 这 个 实践 可 能 很 容易 就 会 产生 有 问题 的 和 脆弱 
的 代码 。 尽 管 作 用 域 继承 方式 对 于 简单 的 用 例 来 说 是 合理 的 ， 但 是 对 于 共享 从 服务 器 加 载 
的 数据 来 说 通常 是 错误 的 选择 。 幸 亏 ， 通 过 接 下 来 要 讲解 的 方式 ， 我 们 也 可 以 使 用 一 种 间 
接 的 方式 对 错误 和 数据 进行 通信 。 


2. 事件 传输 


AngularJS 作用 域 中 包含 了 一 个 流行 的 事件 发 射 器 设计 模式 的 实现 ,这 种 设计 模式 允许 
对 象 使 用 $emit0) 发 射 命名 事件 ， 然 后 触发 使 用 $on() 函 数 注册 的 监听 器 函数 。 例 如 : 
$scope.$on('error', function(error) { 


console.log('An error occurred: ' + error); 
a 


$scope.$emit ('error', 'Could not connect to server'); 


在 之 前 的 样 例 中 ， 该 代码 发 射 了 一 个 错误 事件 ， 然 后 它 将 触发 使 用 .Son('error) 函 数 调 
用 注册 的 处 理 程序 。 事 件 发 射 器 模式 的 强大 之 处 在 于 : 对 于 指定 的 事件 可 以 拥有 任意 数量 
的 监听 器 , 而 这 些 监听 器 可 以 在 任何 能 够 访问 $scope 变量 的 函数 中 注册 。 换 句 话说 , $emit() 
调用 完全 与 监听 器 是 解 耦 合 的 。 可 能 有 0 个 、 一 个 或 者 许多 监听 器 注册 到 了 错误 事件 上 ， 
但 是 这 并 未 影响 Semit() 调 用 的 语法 。 

AngularJS 作用 域 在 传统 事件 发 射 器 模式 之 上 增加 了 两 个 中 间 层 。 首 先 $emit0 调 用 可 以 
向 作用 域 层次 上 方 冒 泡 ， 所 以 使 用 $on 在 祖先 作用 域 上 注册 的 监听 器 将 被 触发 。 例 如 下 面 
的 HTML 代码 : 


<div ng-controller="Controllerl"> 
<div ng-controller="Controller2"> 
</div> 

</div> 


Controller2 能 够 发 射 (Semit()) 事 件 ， 触 发 Controllerl 作用 域 中 注册 的 监听 器 : 


<div ng-controller="Controllerl"> 
<div ng-controller="Controller2"> 
</div> 

</div> 


m.controller('Controllerl', function($scope) { 
// 当 Controller2 的 作用 域 是 $scope 的 下 级 时 ， 该 代码 将 立即 捕捉 到 由 controller2 的 
作用 域 发 射 的 'ping' 事 件 
$scope.$on('ping', function() { 
console.log('pong'); 
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]}) 
Ds 


m.controller('Controller2', function($scope) { 

$scope.s$emit ('ping'); 

]) 

而 且 ， 作 用 域 含 有 $broadcast0 函 数 ， 它 的 行为 与 Semit() 函 数 非常 相似 ， 区 别 在 于 它 的 
事件 将 向 子孙 作用 域 传播 ， 而 不 是 祖先 作用 域 。 换 句 话说 ， 通 过 使 用 $broadcast() 函 数 
Controllerl 可 以 触发 Controller2 作用 域 中 注册 的 监听 器 ， 而 $emit0 函 数 将 以 相反 的 方向 传 
播 事件 。 例 如 : 


m.controller('Controllerl', function($scope) { 
$scope.$broadcast ('ping'); 
1); 


m.controller('Controller2', function($scope) { 
// 当 Controller1 的 作用 域 是 $scope 的 祖先 时 ， 该 代码 将 立即 捕捉 到 由 controllerl 的 
作用 域 广播 的 'ping' 事件 
$scope.$on('ping', function() { 
console.log('pong'); 
D); 
1); 


事件 发 射 器 的 技术 细节 相对 非常 直观 ,但 如 何 高 效 地 使 用 它们 是 一 个 更 加 微妙 的 挑战 。 
事件 发 射 器 是 一 个 强大 的 工具 ， 因 为 它们 在 函数 调用 之 上 添加 了 一 个 间接 层 。 发 射 事件 的 
代码 并 未 注意 到 哪些 函数 被 注册 为 监听 器 。 不 过 ， 这 也 使 严重 依赖 于 事件 发 射 器 的 代码 难 
于 理解 ， 所 以 事件 发 射 器 最 好 少 用 。 但 是 ， 对 于 在 控制 器 之 间 传 输 数据 来 说 ， 它 们 是 完美 
的 工具 。 

演示 作用 域 事件 发 射 器 是 完成 该 工作 的 正确 工具 的 一 个 样 例 是 : 处 理 无 限 滚动 ， 这 是 
一 种 滚动 到 页 面 底部 ， 从 而 引起 更 多 数据 加 载 的 用 户 体验 (UX) 设 计 模式 。 在 开源 社区 中 有 
众多 指令 都 可 以 处 理 无 限 滚动 ， 但 是 使 用 指令 实现 无 限 滚动 就 像 是 尝试 将 一 个 方形 的 销 子 
放 进 一 个 圆 形 的 孔 中 。 无 限 滚动 将 由 页 面 中 的 全 局 事件 触发 (用 户 将 页 面 滚动 到 底部 或 者 用 
户 重 置 页 面 的 大 小 )。 因 此 ， 支 持 无 限 滚动 的 指令 无 法 与 挂钩 的 DOM 元 素 直 接 进 行 交 互 。 
无 限 滚动 最 好 实现 为 页 面 根 作用 域 中 的 事件 , 使 用 $rootScope 服务 表示 , 并 通过 $broadcastO 
函数 向 下 传播 到 子孙 作用 域 。 下 面 是 一 个 使 用 作用 域 事 件 发 射 器 实现 无 限 滚动 的 样 例 : 


app.run (function (SrootScope) { 
var LastCheck = 0; 
var INTERVAL TO_CHECK = 500; // 每 半 秒 检查 一 次 


Var check = function() { 
if (Date.now() - lastCheck < INTERVAL TO CHECK) { 
return; 


} 


lastCheck = Date.now() 


if ($(window) .scrollTop() >= 
$ (document) .height() - $(window) .height() - 50) { 
$rootSscope.$broadcast ('SCROLL TO BOTTOM'); 
} 
} 


setTimeout (function() { 
check (); 
}, 0); 
$ (window) .on('scroll', check); 
$ (window) .on ('resize', check); 
Fs 


之 前 的 模块 将 在 用 户 接近 页 面 的 底部 时 广播 名 为 SCROLL TO_BOTTOM 的 事件 。 事 
件 发 射 器 模式 非常 适合 这 里 的 任务 ， 因 为 有 多 种 情况 可 以 引起 SCROLL TO_BOTTOM 事 
件 ， 而 且 多 个 控制 器 可 能 都 希望 在 该 事件 发 射 时 完成 一 些 事情 。 这 种 在 事件 和 事件 处 理 程 
序 之 间 的 多 对 多 关系 正 是 事件 发 射 器 模式 的 核心 目的 。 另 外 ， 这 种 方式 分 离 了 触发 事件 和 
事件 处 理 程序 的 罗 辑 ， 所 以 可 以 抽象 出 检测 $on0 调 用 背后 SCROLL TO_BOTTOM 事件 的 
触发 条 件 的 复杂 性 。 这 对 于 测试 来 说 是 非常 方便 的 ， 因 为 我 们 的 测试 代码 可 以 触发 
SCROLL_ TO_BOTTOM 事件 ， 而 不 必 在 真正 的 浏览 器 中 运行 。 


注意 : 

你 可 能 已 经 注意 到 之 前 的 代码 使 用 了 jQuery， 就 在 $(window) 那 行 代码 中 定义 $ 函 数 的 
位 置 。 这 里 使 用 jQuery 的 原因 是 : 它 为 窗口 和 文档 滚动 偏 移 提供 了 可 靠 的 抽象 层 ， 可 以 在 
各 种 浏览 器 中 正常 工作 .AngularJS 并 未 提供 该 功能 ,所 以 AngularJS 开发 者 经 常 使 用 jQuery 
对 浏览 器 级 别 事件 的 封装 器 。 实 际 上 ，jQuery 和 AngularJS 是 互补 的 库 ， 而 不 是 相互 竞争 
的 库 。 


在 本 章 样 例 代 码 的 infinite_scroll_ emitter 文 件 中 可 以 找到 使 用 这 个 无 限 滚动 代码 的 样 
例 。 下 面 是 一 个 使 用 了 无 限 滚动 事件 的 控制 器 : 


app.controller('InfinitescrollController', function($scope) { 
$scope.images = []; 
var CYCLE IMAGES = [ 

HE ws 

I 


$scope.$on('SCROLL TO BOTTOM', function() { 
or (var 4 = 0; 生 攻 3; ++4) { 
$scope.images.push({ 
url: CYCLE IMAGES[$scope.images.length % CYCLE IMAGES.1length] 
]}) 
} 
$scope. $apply (); 
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}) 7 
7); 
该 控制 器 在 收 到 SCROLL TO_BOTTOM 事件 时 , 向 $scope.images 中 添加 了 几 个 图 表 。 
现在 可 以 使 用 下 面 的 HTML， 在 infinite scroll emitter.html 文件 中 使 用 这 个 无 限 滚动 代码 : 


<div ng-controller="InfinitescrollController"> 
<div ng-repeat="image in images"> 
<img ng-src="{{image.url}}"> 
</div> 
</div> 


如 你 所 见 ，SCROLL TO_BOTTOM 事件 抽象 出 了 用 户 是 否 已 经 滚动 到 了 页 面 底部 的 
所 有 复杂 计算 。 通 过 它 ，AngularJS 控制 器 可 以 使 用 控制 器 和 无 限 滚动 触发 器 之 间 的 抽象 层 
来 定义 无 限 滚动 行为 。 因 此 ， 作 用 域 事件 发 射 模式 允许 我 们 在 控制 器 之 间或 者 运行 块 和 控 
制 器 之 间 传输 数据 。 不 过 ， 尽 管事 件 发 射 器 模式 非常 适用 于 无 限 滚动 ， 但 它 并 不 适用 于 所 
有 在 控制 器 之 间 传 输 数据 的 情况 。 主 要 的 难点 在 于 决定 哪个 控制 器 应 该 负责 生成 事件 。 对 
于 一 些 常见 的 用 例 ， 例 如 从 服务 器 加 载 数据 ， 哪 个 控制 器 应 该 负责 查询 服务 器 和 生成 事件 
并 不 清晰 。 在 涉及 从 服务 器 加 载 数 据 的 用 例 中 ， 接 下 来 要 讲解 的 模式 通常 才 是 最 佳 选 择 。 


3. ModelService 模式 


事件 发 射 器 模式 对 于 在 控制 器 之 间 传输 用 户 交互 的 结果 是 非常 适用 的 。 不 过 ， 通 常 控 
制 器 也 需要 共享 从 服务 器 加 载 的 数据 。 例 如 ， 页 面 中 的 多 个 控制 器 通常 需要 访问 当前 登录 
的 用 户 ， 而 该 数据 需要 从 服务 器 加 载 。 服 务 是 公开 从 服务 器 加 载 的 数据 的 完美 工具 ， 因 为 
服务 是 单 例 的 : 服务 最 多 只 被 实例 化 一 次 ， 并 且 该 实例 将 在 所 有 依赖 于 该 服务 的 控制 器 和 
服务 之 间 共 享 。 注 意 ， 这 里 单 例 的 概念 与 常用 的 单 例 设计 模式 稍 有 不 同 。 服 务 可 以 通过 
AngularJS 依赖 注入 器 访问 ， 而 不 是 通过 全 局 的 状态 。 第 7 章 将 讲解 服务 和 使 用 服务 作为 单 
例 的 概念 。 不 过 出 于 本 节 的 目的 ， 了 解 所 有 的 控制 器 将 共享 服务 的 相同 实例 即 可 。 

接 下 来 的 样 例 演 示 了 如 何 使 用 userService 封装 当前 登录 用 户 的 异步 加 载 过 程 。 为 了 避 
免 创 建 服务 器 ， 将 使 用 $timeout 调用 来 模拟 一 个 真正 的 超 文本 传输 协议 (HTTP) 请 求 ， 而 不 
是 真正 使 用 $http 调用 。 如 果 打 算 使 用 $http 服务 ， 而 不 是 $timeout， 那 么 服务 的 实现 需要 稍 
微 进行 改动 ,但 是 控制 器 代码 或 者 HTML 完全 不 需要 改动 。 接 下 来 是 样 例 代码 ， 可 以 在 本 
章 样 例 代 码 的 user_service.html 文件 中 找到 它 : 


<div ng-controller="FirstController"> 
<hl>{{user.name}}</h1l> 

</div> 

<div ng-controller="SecondController"> 
<input type="text" ng-model="user.name"> 

</div> 


<script type="text/javascript" src="angular.js"> 
</script> 
<script type="text/javascript"> 


var app = angular-.module('app'，[]) 7 


app.factory('userService', function($timeout) { 
Var user = {}; 
$timeout (function() { 
user.name = 'Username'; 
}, 500); 


return user; 


]}) 7 


app.controller('FirstController'，function($scope，userService) { 
$scope.user = userService; 
1); 


app.controller('SecondController', function($scope, userService) { 
$scope.user = userService; 

es 

之 前 的 样 例 中 有 两 个 关键 概念 。 第 一 个 是 : userService 实例 将 在 FirstController 和 
SecondController 之 间 共 享 。 因 此 当 SecondController 作用 域 中 的 文本 字段 被 修改 时 ， 
FirstController 作用 域 中 的 头 将 会 更 新 ， 反 映 出 这 个 变化 ， 尽 管 实 际 上 这 两 个 作用 域 是 完全 
独立 的 。 第 二 个 是 : userService 中 的 异步 代码 将 触发 FirstController 和 SecondController 作 
用 域 中 的 改动 。 在 底层 ，$timeonut 服务 (以 及 $http 服务 ) 将 在 页 面 根 作用 域 上 调用 $apply0， 
这 就 是 为 什么 userService 不 需要 在 加 载 用 户 数据 时 发 射 事件 的 原因 。 通 过 这 种 方式 ， 我 们 
只 需 编写 一 个 使 用 userService 的 控制 器 即 可 , 犹如 userService 异步 地 在 抓 取 数据 一 样 。 通 
过 结合 这 两 个 概念 ， 服 务 将 成 为 一 个 抽象 异步 HITP 调用 结果 的 理想 工具 。 下 一 节 将 介绍 
在 不 同 的 服务 之 间 以 及 在 服务 和 控制 器 之 间 传输 数据 的 一 些 更 复杂 的 工具 。 


3.2.2 服务 


服务 是 在 作用 域 层次 之 外 使 用 AngularJS 的 依赖 注入 器 连接 在 一 起 的 对 象 。 控 制 器 通 
常会 把 多 个 服务 列 为 依赖 , 但 是 服务 无 法 把 控制 器 列 为 依赖 ,如 上 一 节 所 提 到 的 , 服务 是 (从 
某 种 意义 上 讲 ) 单 例 的 , 每 个 服务 只 会 被 实例 化 一 次 。 这 将 使 服务 成 为 存储 加 载 自 服务 器 的 
数据 或 者 持久 化 数据 到 服务 器 的 理想 之 选 。 

在 前 一 节 ， 我 们 学 习 了 在 不 同 控制 器 之 间 通 信 的 几 种 方式 。 最 后 一 种 方式 依赖 于 一 个 
事实 : 服务 是 单 例 的 。 服 务 之 间 的 通信 与 控制 器 之 间 的 通信 有 着 本 质 的 区 别 ， 因 为 服务 无 
法 访问 作用 域 , 而 且 HIML 没有 控制 器 的 帮助 就 无 法 实例 化 服务 。 但 有 一 些 使 服务 之 间 相 
互通 信 的 简便 方法 。 


1. 依赖 于 其 他 服务 的 服务 


在 服务 之 间 通 信和 最 基本 的 工具 就 是 一 个 服务 可 以 把 其 他 服务 列 为 依赖 。 这 种 方式 诚然 
是 微不足道 的 ， 但 它 确实 演示 了 服务 和 作用 域 的 一 个 关键 点 。 为 了 演示 这 个 关键 点 ， 假 设 
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现在 有 一 个 名 为 profileService 的 服务 依赖 于 服务 userService。 假设 profileService 服务 的 主 
要 目的 是 提供 一 个 API， 使 控制 器 可 以 修改 由 userService 提供 的 数据 并 将 改动 保存 到 服务 
器 。 下 面 是 本 章 样 例 代码 中 profile_service .html 文件 的 内 容 : 


<div ng-controller="ProfileController"> 
<input type="text" ng-model="profile.user.name"> 
<h2 ng-show="!profile.isValid()"> 
Username required 
</h2> 
</div> 


<script type="text/javascript" src="angular.js"> 


</script> 
<script type="text/javascript"> 
var app = angular.module('app', []); 


app.factory('userService', function($timeout) { 
var user = {}; 
$timeout (function() { 
user.name = 'Username'; 
}, 500); 


return user; 


1); 


app .factory('ProfileService'，function(userService) { 
Var ret = { 
user: userService, 
isValid: function() { 
return ret.user && ret.user.name; 
} 
}; 


return ret; 
1D); 


app.controller ('ProfileController', function($scope, profileservice) { 
$scope.profile = profilesService; 
上 
</acript> 
该 代码 将 根据 isValid0 函 数 的 值 ， 正 确 地 更 新 Usemame required 错误 消息 的 可 见 性 ， 

虽然 事实 上 profileService 函数 并 没有 处 理 底 层 userService 中 数据 变动 的 代码 。 尽 管 这 些 服 
务 在 作用 域 层 次 之 外 , 但 是 它们 仍 可 以 使 用 像 Stimeout 和 S$http 这 样 的 服务 触发 作用 域 更 新 ， 
如 $rootScope 服务 所 展示 的 那样 在 页 面 的 根 作用 域 中 触发 一 个 更 新 。 因 此 ， 可 以 基于 其 他 
服务 构建 服务 ， 而 不 必 让 这 些 服务 进行 交互 ， 因 为 AngularJS 作用 域 层 次 在 控制 器 中 可 以 
将 所 有 的 服务 都 绑 定 在 一 起 。 第 4 章 涵盖 了 AngularJS 作用 域 的 细节 。 不 过 ， 出 于 高 级 别 


代码 组 织 的 目的 ， 了 解 对 根 作用 域 的 更 新 将 向 下 传播 到 页 面 中 的 所 有 作用 域 即 可 。 

在 下 一 节 ， 将 学 习 如 何在 服务 中 使 用 事件 发 射 器 。 尽 管 AngularJS 作用 域 层 次 可 以 处 
理 这 种 情况 : 服务 中 的 改动 需要 被 传播 到 控制 器 ， 但 它 并 不 是 将 改动 从 一 个 服务 传播 到 另 
一 个 服务 的 正确 选择 。 如 profileService 样 例 所 示 ， 通 常 可 以 不 在 服务 之 间 传 播 改动 ， 而 是 
依赖 于 作用 域 层 次 将 它们 绑 定 在 一 起 。 不 过 ， 如 你 接 下 来 将 看 到 的 ， 有 时 使 用 服务 传输 事 
件 实现 真正 的 服务 内 通信 是 非常 有 用 的 。 


2. 事件 发 射 器 模块 


在 控制 器 间 通 信 一 节 学 习 的 作用 域 事件 发 射 器 模式 并 不 只 限于 AngularJS 作用 域 。 事 
件 发 射 器 在 JavaScript 社区 中 是 非常 流行 的 ， 正 因为 它 是 从 一 个 对 象 传播 数据 到 另 一 个 对 
象 的 一 种 优雅 的 、 轻 量 级 的 方式 。 尤 其 是 ，NodeJS 的 核心 包含 了 一 个 健壮 的 事件 发 射 器 框 
架 ，NodeJS 社区 将 它 迁移 到 了 一 个 独立 的 event-emitter 模块 中 。 有 众多 其 他 JavaScript 模 
块 都 提供 了 事件 发 射 器 功能 ， 但 是 event-emitter 模块 只 包含 了 一 个 健壮 的 事件 发 射 器 ， 没 
有 其 他 功能 ， 因 此 event-emitter 模块 对 于 缩小 代码 以 及 用 于 教学 目的 是 非常 有 用 的 。 

event-emitter 模块 的 工作 方式 非常 类 似 于 前 一 节 中 使 用 的 作用 域 事 件 发 射 器 。 它们 有 3 
个 关键 的 区 别 。 第 一 ，event-emitter 是 独立 于 作用 域 的 ， 所 以 在 无 法 访问 作用 域 的 服务 中 
使 用 它 是 非常 理想 的 。 第 二 , 将 使 用 的 函数 被 命名 为 .on() 和 .emit()。 它 们 对 应 于 AngularJS 
作用 域 的 .on() 和 .emit0 方 法 。 第 三 , 没有 对 应 于 $broadcast() 的 函数 ， 因 为 event-emitter 并 未 
对 对 发 射 器 之 间 的 事件 传播 提供 支持 。 尽 管 缺 少 事件 传播 似乎 会 受到 限制 ， 但 是 由 于 服务 
的 单 例 特性 ， 该 模块 实际 上 被 证 明 是 非常 适用 于 服务 的 。 

服务 从 事件 发 射 器 中 获 益 的 一 个 优秀 样 例 是 : 之 前 学 习 的 userService 样 例 。 当 
userService 被 实例 化 时 ， 它 需要 发 出 一 个 异步 HTTP 请 求 ， 从 服务 器 加 载 关 于 当前 登录 用 户 
的 数据 。 而 且 ， 如 果 期 望 页 面 是 长 期 存活 的 (例如 ， 单 页 面 应 用 或 者 实时 仪表 盘 )， 那 么 我 
们 可 能 希望 每 个 小 时 从 服务 器 重新 请 求 数据 一 次 ， 以 免 用 户 的 会 话 过 期 。 使 事情 变 得 更 加 
复杂 的 是 : 大 量 服务 和 控制 器 都 依赖 于 userService 服 务 ， 而 且 底 层 的 HTTP 请 求 可 能 失败 。 
userService 如 何 将 新 的 数据 (以 及 任何 错误 ) 以 异步 方式 传播 给 依赖 于 它 的 服务 呢 ? 事件 发 
射 器 为 应 对 这 个 设计 挑战 提供 了 一 个 优雅 的 解决 方案 。 

可 以 在 本 章 样 例 代 码 的 user_service_emitter.html 文件 中 找到 下 面 的 样 例 。 为 方便 起 见 ， 
event-emitter 模块 已 经 被 打包 成 本 章 样 例 代码 中 的 event-emitterjs 文件 ， 并 被 包含 在 
user_service_emitter.html 文件 中 : 


<script type="text/javascript" src="angular.js"> 


</script> 
<script type="text/javascript" src="event-emitter.js"> 
</script> 
<script type="text/javascript"> 
Var app = angular.module('app', []); 


app.factory('userService', function($timeout, S$window) { 
Var emitter = S$window.emitter(); 


101 


AngularJS 高 级 编程 


Var user = {}; 
$timeout (function() { 


// 模拟 HTTP 错误 


user.emit('error', 'Could not connect to server'); 
}, 2000); 


['on', ‘'once', ‘'emit'"].forEach(function(fn) { 
user[fn] = function() { 
emitter[fn] .apply (emitter, arguments); 
}; 
1); 


return user; 
Ws 


app.factory('profileService'，function (userService) { 
var ret = { 
user: UserService， 
isValid: function() { 
return ret.user && ret.user.name; 
} 
}s 


userService.on('error', functionl(error) { 
ret.error = 'This is a sample error message ' + 
'that would tell the user that you can\'t ' + 
'connect to the server'; 
1D; 


return ret; 
1); 


app.controller ('ProfileController', function($scope, profilesService) { 
$scope.profile = profileservice; 
7); 


</script> 
在 之 前 的 代码 中 ，userService 发 射 了 一 个 错误 事件 ，profileService 将 监听 该 事件 并 使 
用 它 显 示 消 息 。 再 次 ， 该 事件 不 需要 被 传播 到 控制 器 中 ， 因 为 $timeout 将 通知 作用 域 层次 
某 些 事情 更 改 了 。 不 过 ,事件 发 射 器 允许 profileService 得 到 userService 中 错误 的 通知 ， 并 
正确 地 处 理 它们 。 因 此 ， 如 果 需 要 在 两 个 服务 之 间 进 行 通信 ， 事 件 发 射 器 自然 是 最 佳 的 
选择 。 


注意 : 

你 可 能 已 经 注意 到 了 本 章 的 样 例 代 码 除 了 event-emitterjs 文 件 还 包含 一 个 event- 
emitter-index.js 文 件 。 这 是 因为 在 底层 ，event-emitter 模 块 是 一 个 使 用 Browserify 为 浏览 器 编 
译 的 NodeJS 模 块 。event-emitter-index.js 文 件 的 目的 是 将 事件 发 射 器 功能 公开 给 全 局 的 
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window 对 象 。 “模块 加 载 器 ”一 节 将 详细 讲解 Browserify。 
3.2.3 ”指令 

指令 是 DOM 如 何 与 JavaScript 变量 交互 的 规则 。 换 名 话说, 指令 是 AngularJS 对 DOM 
交互 的 抽象 。 例 如 ，ngClick 定义 了 一 个 指令 说 :“ 当 该 元 素 被 单 击 时 ， 执 行 该 代码 段 。” 第 
5 章 将 详细 讲解 指令 的 相关 内 容 ， 但 对 于 本 节 来 说 ， 将 指令 看 成 DOM 交互 的 规则 即 可 。 
指令 可 以 有 一 个 相关 联 的 控制 器 ， 但 是 控制 器 和 服务 无 法 将 指令 列 为 依赖 。 


注意 : 
指令 应 该 是 代码 与 DOM 元 素 (可 能 除了 全 局 的 window 元 素 ) 交 互 的 唯一 位 置 。 糟 糕 
AngularJS 代 码 的 确定 标志 是 在 控制 器 中 调用 document.getElementById()。 


因为 指令 被 绑 定 到 了 作用 域 中 , 指令 间 通 信 的 行为 与 控制 器 间 通 信 非 常 类 似 。 事实 上 ， 
自 定义 指令 通常 有 它们 自己 的 控制 器 , 所 以 可 以 在 控制 器 间 通 信 中 使 用 熟悉 的 设计 模式 (之 
前 “控制 器 ”一 节 所 使 用 过 的 模式 )。 不 过 ， 对 于 指令 间 通 信 指 令 提 供 了 一 个 额外 的 特性 ， 
接 下 来 将 会 学 习 。 


使 用 控制 器 公开 API 


在 本 节 开 头 ， 我们 已 经 了 解 到 由 于 作用 域 继承 的 原因 ， 控 制 器 可 以 访问 它 的 祖先 作用 
域 中 定义 的 变量 。 这 将 使 控制 器 可 以 访问 其 他 控制 器 的 内 部 状态 ， 只 要 其 他 控制 器 被 绑 定 
到 第 一 个 控制 器 的 某 个 祖先 作用 域 中 。 遗 憾 的 是 ， 作 用 域 继 承 方式 的 作用 是 非常 有 限 的 ， 
因为 没有 好 的 方式 可 以 强制 控制 器 只 可 以 定义 在 另 一 个 控制 器 的 子孙 作用 域 中 。 另 一 方面 ， 
指令 提供 了 一 个 机 制 ， 用 于 保证 指令 的 作用 域 必须 总 是 另 一 个 指令 作用 域 的 子孙 。 

第 1 章 讲解 的 StockDog 应 用 包含 了 该 功能 的 一 个 样 例 。StockDog 应 用 含有 两 个 指令 : 
stockTable 和 stockRow 一 一 它们 应 该 一 起 使 用 。 尤 其 是 ，stockTable 指令 包含 了 stockRow 
指令 的 大 量 实例 。 下 面 是 stockRow 指令 的 定义 : 


angular.module ('stockDogApp') 
.directive('stockTable', function () { 
return { 
templateUrl: "views/templates/stock-table.html'， 
FOStricts EE", 
sebpes: { 
watchlist: '=" 
}, 
controller: function ($scope) { 
Hf ss 
} 
} 
]) 


stockTable 指 令 的 控制 器 公开 了 一 些 功能 。 为 了 保证 stockRow 指 令 只 被 声明 在 
stockTable 指 令 中 ， 可 以 使 用 如 下 所 示 的 require 指 令 选项 : 
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angular.module ('stockDogApp') 
.directive('stockRow', function ($timeout, QuoteService) { 
return { 
Poptticts "WES 
require: '^stockTable', 
scope: 1{ 
Stooks. = 
isLast: '=" 
} 
link: function ($scope, $element, S$attrs, stockTableCtrl1) { 
9 
， 
}; 
1); 
指令 选项 require 要 求 stockRow 指令 的 作用 域 必须 是 stockTable 指令 作用 域 的 子孙 。 
而 且 ， 可 以 访问 被 实例 化 的 stockTable 指令 的 控制 器 ， 它 是 link 函数 的 第 4 个 参数 (第 5 章 
涵盖 了 link 函数 的 更 多 细节 )。 如 果 有 两 个 指令 需要 一 起 使 用 ， 那 么 require 指令 选项 是 完 
成 这 个 工作 的 正确 工具 。 


3.2.4 小 结 


在 本 节 ， 我 们 学 习 了 指令 、 服 务 和 控制 器 在 概念 上 的 区 别 ， 以 及 如 何在 不 同 的 组 件 之 
间 共 享 状态 。 每 个 组 件 的 属性 都 使 它们 适用 于 特定 的 任务 : 服务 用 于 从 服务 器 加 载 数据 和 
保存 数据 到 服务 器 、 控 制 器 用 于 公开 API 给 指令 、 指 令 用 于 管理 DOM 交互 。 下 一 节 将 学 
习 模 块 ， 这 是 用 于 将 相关 组 件 打包 到 单个 可 重用 组 的 AngularJS 高 级 组 织 工具 。 


3.3 ”使 用 模块 组 织 代码 


你 可 能 已 经 注意 到 本 书 的 所 有 样 例 都 包含 了 对 angular.module() 函 数 的 调用 。 模 块 是 
AngularJS 最 高 级 别 的 组 织 单元 。 模 块 实际 上 是 一 个 从 字符 串 到 一 组 控制 器 、 服 务 、 过 滤器 
和 指令 的 映射 。 因 为 模块 提供 了 这 样 一 个 高 级 别 的 抽象 ， 小 型 的 AngularJS 代码 库 通常 只 
使 用 一 个 模块 。 不 过 ， 随 着 代码 库 的 增长 和 成 熟 ， 你 可 能 发 现 需要 将 代码 分 割 成 不 同 的 模 
块 ， 用 于 优化 可 读 性 和 可 重用 性 。 

模块 最 强大 的 特性 就 是 它们 可 以 把 其 他 模块 列 为 依赖 ， 通 过 这 种 方式 可 以 在 自己 的 模 
块 中 包含 来 自 另 一 个 模块 的 组 件 。 例 如 : 

// 'MYyModule ' 依 赖 于 'otherModule'， 因 此 包含 了 'otherModule' 中 定义 的 所 有 服务 、 指 
令 、 控 制 器 和 其 他 组 件 

Var myModule = angular.module('MyModule', ['OtherModule']); 

警告 如 果 期 望 AngularJS 负责 加 载 OtherModule 的 内 容 ， 那 么 事实 并 不 是 这 样 。 除 
非 我 们 包含 了 调用 angular.module() 函 数 创建 出 OtherModule 的 JavaScript 代码 ， 否 则 之 前 
的 代码 是 无 法 工作 的 。 


第 3 章 架 构 


将 模块 列 为 其 他 模块 的 依赖 的 能 力 允 许 我 们 轻松 地 更 换 AngularJS 代 码 中 的 大 块 代码 ， 
而 不 必 从 代码 库 中 移 除 文件 。 这 对 于 测试 、 实 验 新 功能 和 UX 测试 (例如 A/B 测试 ) 是 非常 
有 用 的 。 为 了 提供 如 何 使 用 模块 的 一 个 更 具体 的 样 例 ， 将 使 用 AngularJS 模块 为 页 面 注册 
流 开发 出 一 个 简单 的 A/B 测试 。 


注意 : 

A/B 测试 (或 者 “split test”) 是 一 个 实验 ,访问 者 将 随机 地 看 到 网 站 两 个 稍微 不 同 的 变 
种 。 一 个 基本 的 样 例 是 : 随机 地 向 访问 者 在 主页 中 展示 两 个 不 同 广告 图 片 之 一 ， 并 追踪 哪 
个 页 面 有 更 多 的 用 户 登 录 。A/B 测试 非常 流行 ， 因 为 它 通过 基于 证 据 的 方式 来 不 断 地 改进 
网 站 的 用 户 体验 。 


现在 有 许多 流行 的 A/B 测试 框架 ， 例 如 Optimizely， 但 是 它们 主要 被 设计 为 工作 于 静 
态 网 站 ， 而 不 是 丰富 的 、 基 于 AJAX 的 内 容 。 而且 , 这些 A/B 测试 框架 无 法 使 用 AngularJS 
模块 ( 它 可 以 允许 你 轻松 地 蔡 换 功能 的 大 块 代码 )。 在 本 样 例 中 ， 将 使 用 开发 者 友好 的 分 析 
框架 KeenIO， 该 框架 提供 了 一 个 REST API 用 于 发 送 任意 的 JSON 对 象 ， 然 后 查询 结果 。 
KeenIO 要 求 使 用 keen.io 中 的 账户 登录 并 获得 一 个 API 密 钥 。KeenIO 在 请 求 达到 每 个 月 
50 000 之 前 是 免费 的 ， 这 应 该 超出 了 本 章 样 例 的 最 高 需求 。 而 且 ， 在 本 样 例 中 可 以 使 用 自 
己 选择 的 分 析 框 架 蔡 换 KeenIO( 如 果 相 信 另 一 个 工具 更 适合 的 话 )。 本 节 主 要 专注 于 使 用 模 
块 运行 A/B 测试 时 所 需 的 概念 。 集 成 KeenIO 只 需要 很 少 的 工作 量 。 大 多 数 其 他 分 析 框 架 
都 应 该 能 够 提供 相似 的 功能 , 但 本 样 例 使 用 的 是 KeenIO, 主要 原因 是 它 慷慨 的 免费 层 和 直 
观 的 数据 模型 。 
使 用 AngularJS 集成 KeenIO 是 非常 简单 的 .KeenIO 为 浏览 器 端 JavaScript 提供 了 一 个 
软件 开发 工具 包 (SDK)， 可 以 在 script 标记 中 包含 它 ， 如 下 所 示 : 
<script src="https:// d26b395fwzu5fz.cloudfront.net/3.1.0/keen.min.js" 
type="text/javascript"> 
</script> 
一 旦 包含 了 KeenIO 的 JavaScript SDK， 就 可 以 在 页 面 的 全 局 作用 域 中 创建 一 个 KeenIO 
客户 端 : 


Var keenClient = new Keen({ 
projectId: '<Your KeenIO project ID>', 
writeKey: '<Your KeenIO write key>' 
1); 


不 要 忘记 将 projecttd 和 writeKey 字 段 分 别 设置 为 你 的 项 目的 KeenIO 项 目 ID 和 写 入 密 
钥 。 一 旦 创建 了 keenClient 变 量 ， 我 们 就 可 以 开始 为 AIB 测 试 构建 AngularJS 代 码 了 。 

使 用 AngularJS 模块 完成 A/B 测试 是 如 此 简单 ， 因 为 可 以 轻松 地 使 用 一 个 模块 蔡 换 另 
一 个 模块 ， 只 要 它们 提供 了 兼容 的 控制 器 、 指 令 和 服务 即 可 。 在 这 个 A/B 测试 样 例 中 (该 样 
例 的 完整 源 代码 在 本 章 样 例 代码 的 a_b_test_example.html 文件 中 )， 将 创建 4 个 模块 。 其 中 
两 个 模块 是 一 个 简单 注册 流程 的 两 种 稍微 不 同 的 实现 ， 其 中 一 个 模块 将 在 页 面 加 载 时 随机 
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第 一 个 要 编写 的 模块 非常 简单 。 它 定义 了 单个 值 ， 该 值 代表 了 存储 结果 的 KeenIO 集 
合 的 名 称 。 一 个 KeenIO 集合 是 相关 事件 的 一 个 逻辑 存储 单元 。 换 句 话说 ， 如 果 希 望 运行 
其 他 A/B 测试 ， 那么 我 们 会 希望 把 这 些 结果 存储 到 不 同 的 集合 中 ， 从 而 可 以 轻松 地 区 分 不 
同 测试 的 数据 。 下 面 是 定义 了 将 要 使 用 的 KeenIO 集合 名 称 的 模块 的 源 代码 : 


Var abTest = angular.module ('abTestRegistration', []); 
abTest .value ('abTestCollection', 'registration AB test 20141112'); 


在 之 前 的 代码 中 , 我们 定义 了 一 个 名 为 abTestCollection 的 服务 ， 它 只 是 一 个 代表 了 集 
合 名 称 的 字符 串 。 使 用 该 模块 的 目的 是 为 了 使 将 要 测试 的 两 个 注册 流程 变种 可 以 使 用 相同 
的 集合 。 接 下 来 是 A/B 测试 的 主体 : 两 个 注册 变种 registrationA 和 registrationB: 


var registrationModuleR = angular.module('registrationA', 
['abTestRegistration']); 


registrationModuleA.controller ('RegistrationController', 
function($scope, S$window, $timeout, abTestCollection) { 
keenClient.addEvent (abTestCollection, { 
type: 'view' 
variant: 'A' 
DD); 


$scope.useTemplate = '/registration/a'; 


$scope.submit = function() { 
$timeout (function() { 
$scope.registered = true; 
keenClient.addEvent (abTestCollection, { 
type: 'registered', 
variant: 'A' 
1D); 
}, 1000); 
}; 
]) 


var registrationModuleB = angular.module('registrationB' 
['abTestRegistration']); 


registrationModuleB.controller('RegistrationController', 
function($scope, S$window, $timeout, abTestCollection) { 
keenClient.addEvent (abTestCollection, { 
type: 'view', 
Variant: 'B' 
DD); 
$scope.useTemplate = '/registration/b'; 


$scope.submit = function() { 
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$scope.inProgress = true; 
$timeout (function() { 
$scope.inProgress = false; 
$scope.registered = true; 
keenClient.addEvent (abTestCollection, { 
type: 'registered', 
variant: 'B' 
1D); 
}, 1000); 
}; 
1); 
registrationA 和 registrationB 模块 都 定义 了 一 个 控制 器 : RegistrationController。 每 个 模 
块 的 控制 器 都 将 追踪 两 个 不 同 的 事件 : 当 控制 器 加 载 时 生成 的 view 事件 和 当 用 户 将 成 功 注 
册 时 生成 的 已 注册 事件 。 不 过 ， 每 个 模块 的 RegistrationController 都 稍 有 不 同 。 它 们 有 3 
个 关键 的 区 别 。 第 一 , 当 registrationA 发 送 事件 到 KeenIO 时 , 它 将 把 variant 字段 设置 为 'A'， 
而 registrationB 模块 将 被 设置 为 'B'。 通 过 这 种 方式 ， 我 们 在 分 析 实 验 的 结果 时 可 以 把 发 生 
在 哪个 变种 的 事件 进行 分 类 。 第 二 ，registrationB 模块 将 把 inProgress 变量 设置 为 tue。 这 
代表 A/B 测试 将 要 衡量 它们 有 效 性 的 UX 改变 之 一 。 尤 其 是 ，registrationB 模块 将 展示 一 
个 loading 消息 与 用 户 进 行 沟通 ， 告诉 它们 页 面 成 功 地 处 理 了 用 户 的 注册 请 求 。UX 实验 的 
目标 将 决定 该 网 站 是 否 可 以 通过 减少 在 注册 过 程 中 退出 页 面 的 用 户 的 数量 (因为 他 们 认为 
页 面 损坏 了 ) 来 提高 它 的 注册 率 。 
最 后 ，registrationA 模块 把 useTemplate 变量 设置 为 registration/a'， 而 registrationB 把 
它 的 值 设 置 为 /registration/b'。 如 果 我 们 不 查看 页 面 中 的 对 应 HIML 可 能 就 不 太 清楚 其 中 的 
原因 ， 那 么 请 看 如 下 代码 : 


<body> 
<div ng-controller="RegistrationController" ng-include="useTemplate"> 
</div> 

</body> 


ngInclude 指 令 ( 第 6 章 将 详细 进行 讲解 ) 在 之 前 所 示 的 div 元 素 中 包含 了 名 为 
Wregistration/a' 或 者 Mregistration/b' 的 模板 中 的 HIML( 取 决 于 正在 显示 的 是 哪个 变种 )。 如 你 所 
见 ，AngularJS 的 模板 功能 是 AB 测 试 中 另 一 个 方便 的 工具 : 可 以 根据 正在 显示 的 变种 ， 有 
条 件 地 显示 HTML 的 不 同 部 分 ， 而 不 必 改 变 任 何 代码 。 下 面 是 分 别 代表 了 A/B 测 试 中 两 个 
变种 的 模板 : 


<script type="text/ng-template" id="/registration/a"> 
<hl>Registration Variant A</hl> 
<h3>Please Enter Your Email:</h3> 
<input type="text" ng-model="email"> 
<br> 
<input type="button" ng-click="submit()" value="Submit"> 
<h4 ng-show="registered"> 
Thanks for Registering! 
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</h4> 
</script> 


<script type="text/ng-template" id="/registration/b"> 
<hl>Registration Variant B</hl> 
<input type="text" ng-model="email" placeholder="Email"> 
<br> 
<input type="button" ng-click="submit()" value="Register"> 
<h4 ng-show="inProgress"> 
Registering... 
</h4> 
<h4 ng-show="registered"> 
Thanks for Registering! 
</h4> 
</script> 


一 旦 获得 了 之 前 的 模板 ， 所 有 需要 做 的 就 是 将 所 有 代码 与 第 4 个 模块 绑 定 在 一 起 ， 该 
模块 将 随机 地 选择 registrationA 或 者 registrationB 模 块 。 下 面 的 代码 将 基于 Math.random0) 函 
数 的 输出 选择 其 中 一 个 变种 : 


Var myModule = angular.module('myApp', 
[(Math.random() >= 0.5 ? 'registrationB' : 'registrationA')]); 


现在 ， 当 我 们 打开 a_b_test_example.html 文件 时 ， 应 该 看 到 变种 A 或 者 变种 B。 然 后 
可 以 尝试 注册 几 次 ， 并 使 用 KeenIO 的 REST API 来 查询 A/B 测试 的 结果 。 例 如 ， 为 了 向 
KeenIO 查询 多 少 用 户 使 用 变种 A 进行 注册 , 可 以 在 浏览 器 中 使 用 下 面 的 URL( 统 一 资源 定 
位 符 ) 进 行 访问 : 


https:// api.keen.io/3.0/projects/<project id>/queries/ 
count?event collection=registration AB test _20141112&api_key= 
<your api key>&filters=<your filters> 


需要 在 之 前 的 URL 中 包含 项 目 IDP、API 密 铀 和 所 选 的 JSON 过 滤器 的 URL 编码 。 特 
别 是 ， 为 了 获得 通过 变种 A 注册 的 用 户 的 数量 ， 我 们 的 过 滤器 应 该 是 下 面 JSON 代码 的 
URI 编码 版 本 : 


[ 

{ 
"property name":"type", 
"operator":"eq", 
"property value":"registered" 

}, 

{ 
"property name":"variant", 
"operator"”:"eq", 
"property value":"a" 


恭喜 ! 你 已 经 使 用 AngularJS 模块 运行 了 一 个 简单 的 A/B 测试 。 刚 开始 模块 看 起 来 似 
乎 是 个 不 必要 的 功能 ， 但 是 随 着 代码 库 的 增长 ， 它 们 将 变 得 不 可 缺少 。 尤 其 是 ， 在 模块 配 
置 时 无 颖 地 替换 代码 库 中 的 大 范围 代码 使 A/B 测试 变 得 非常 简单 。 


3.4 ”目录 结构 


改善 应 用 架构 的 最 简单 方式 就 是 将 代码 拆 分 成 文件 ， 并 以 合理 的 方式 组 织 这 些 文件 。 
样 例 应 用 通常 将 所 有 的 控制 器 、 服 务 和 指令 都 保存 在 单个 文件 中 ， 使 其 中 的 内 容 容 易 被 读 
者 所 吸收 ; 不过， 生产 应 用 通常 有 许多 组 件 存 在 ， 因 此 将 它们 保存 在 单个 文件 中 是 不 合 
理 的 。 

Google 的 AngularJS 团队 对 于 构建 AngularJS 应 用 有 自己 的 一 些 建议 。 在 本 节 ， 将 研 
究 适 用 于 不 同 应 用 规模 的 各 种 目录 结构 模式 ， 所 有 这 些 模式 都 大 量 借 鉴 了 AngularJS 团队 
的 建议 。 

在 深入 学 习 目 录 结 构 前 ， 要 考虑 AngularJS 文件 的 命名 约定 是 非常 重要 的 。Google 的 
“Best Practice Recommendations for Angular App Structure ”文档 推荐 以 每 个 组 件 为 基础 使 
用 连 字符 分 割 的 名 字 命 名 文件 。 例 如 ，FooController 将 被 定义 在 名 为 foo-controllerjs 文件 
中 ，FooController 的 单元 测试 将 被 定义 在 文件 foo-controller testjs 中 。 使 用 这 些 约定 的 原 
因 是 Google 内 部 采用 了 跨 语 言 文件 命名 规范 。 
通常 ， 不 需要 (或 者 不 推荐 ) 遵 守 Google 之 外 的 命名 实践 。 在 实际 中 ，AngularJS 控 制 器 
通常 使 用 帕斯卡 拼写 法 名 称 (例如 FooBarController)， 而 服务 通常 使 用 驼峰 式 大 小 写 名 称 ( 例 
如 fooBarService)。 指 令 则 必须 使 用 驼峰 式 大 小 写 名 称 ( 例 如 fooBarDirective)， 因 为 在 HTML 
中 使 用 指令 时 ，AngularJS 将 把 驼峰 式 大 小 写 指令 转换 成 连 字 符 大 小 写 名 称 (例如 
foo-bar-directive)。 因 此 使 用 连 字 符 分 隔 的 文件 名 称 在 变量 名 和 定义 它 的 文件 之 间 添 加 了 一 
个 额外 的 中 间 层 。 可 以 选择 遵守 连 字符 分 隔 的 文件 名 称 约定 ， 因 为 它 是 容易 接受 的 、 独 立 
于 语言 的 实践 。 不 过 ， 我 们 也 可 以 选择 使 文件 名 尽 可 能 地 匹配 组 件 名 称 。 例 如 ， 如 果 
FooController 有 它 自己 的 文件 ， 那 么 该 文件 的 名 称 应 该 是 FooControllerjs 。 类 似 地 ， 
FooController 的 单元 测试 应 该 保存 在 文件 FooControllertestjs 中 。 无 论 哪 种 约定 都 是 合理 的 。 
本 节 将 同时 使 用 这 两 种 方式 。 不 过 ， 最 重要 的 是 选择 一 种 方式 ， 并 坚持 在 应 用 中 一 直 使 
用 它 。 

不 过 ， 如 将 在 本 节 所 看 到 的 ， 我 们 不 需要 为 每 个 组 件 创建 一 个 单独 的 文件 。 较 大 的 应 
用 通常 需要 为 每 个 组 件 创 建 一 个 文件 ， 在 单个 文件 中 保存 几 个 拥有 数 百 行 代码 的 控制 器 是 
非常 糟糕 的 组 织 方式 。 但 如 果 正 在 开发 一 个 原型 ， 而 且 控制 器 只 有 5-10 行 代码 ， 那 么 为 组 
件 定义 单独 的 文件 可 能 会 降低 开发 速度 。 作 为 通用 经 验 法 则 ， 我 们 认为 重要 的 组 件 应 该 有 
它们 自己 的 文件 。 例 如 ， 控 制 器 通常 有 自己 的 文件 ， 但 是 通常 大 型 的 应 用 甚至 为 常用 的 单 
行 过 滤器 也 创建 了 独立 的 文件 。 在 本 节 ， 将 学 习 各 种 项 目 规模 的 目录 构建 指南 (小 型 、 中 型 
和 大 型 )， 从 而 创建 一 个 允许 代码 库 优 雅 地 进行 增长 的 框架 。 
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3.4.1 小 型 项 目 


小 型 应 用 、 原 型 和 starter 项 目 中 可 以 采用 的 一 种 目录 结构 方式 就 是 分 别 为 控制 器 、 服 
务 和 指令 各 创建 一 个 文件 。 一 个 好 的 样 例 就 是 Ionic 框架 的 “tabs” starter 项 目 (Ionic 是 一 
个 开发 混合 移动 应 用 的 工具 ， 第 10 章 “ 继 续 前 行 ” 将 进行 详细 讲解 )， 地 址 为 https:// 
github.com/driftyco/ionic-starter-tabs。 该 项 目 把 它 的 AngualrJS 文件 存储 在 一 个 js 目录 中 ， 
并 使 用 单个 appjjs 文件 包含 了 模块 定义 和 应 用 级 别 的 配置 逻辑 ， 包 括 所 有 的 单 页 面 应 用 路 
由 。 控 制 器 文件 controllersjs 和 服务 文件 services.js 包含 了 它们 自己 的 模块 定义 ，app.js 
文件 将 把 它们 组 装 成 一 个 模块 在 HTML 中 使 用 .AngularJS 文件 被 分 离 到 了 这 个 js 目录 中 ， 
将 顶级 目录 留 给 了 HIML 和 图 片 所 在 的 目录 。 

为 方便 起 见 ， 本 章 样 例 代码 有 一 个 small project 目录 ， 其 中 包含 了 根据 这 些 指南 创建 
的 项 目 结构 。 该 项 目 从 代码 角度 来 看 非常 微不足道 ， 但 是 它 提供 了 一 个 如 何 构建 此 类 项 目 
的 具体 样 例 。 该 项 目 包含 了 一 个 js 目录 ， 其 中 包含 了 app.js、services.js、controllerjs 和 
directives.js。 文 件 appjjs 将 负责 启动 应 用 : 


angular. 
module('foo', ['foo.controllers', 'foo.services', 'foo.directives']). 
config (function($rootscopeProvider) { 
// Configuration logic goes here 
DD); 


每 个 services.js、controllerjs 和 directivesjjs 文件 都 包含 了 一 个 独立 的 模块 ， 它 们 分 别 


是 foo.services、foo.controllers 和 foo.directives。 每 个 文件 都 负责 定义 该 分 类 的 所 有 组 件 ; 
例如 ，controllersjs 定义 了 该 应 用 的 所 有 控制 器 : 


angular. 
module('foo.controllers', []). 
controller('FooController', function($scope) { 
// 使 用 $scope 
Ws 
该 项 目 结构 适用 于 小 型 项 目 ， 例 如 Ionic 框架 的 starter 项 目 ， 它 是 构建 更 加 复杂 应 用 
的 起 始点 。 因 为 AngularJS 在 底层 完成 了 如 此 多 的 工作 ， 所 以 可 以 轻松 使 用 该 项 目 结构 构 
建 原型 (甚至 是 生产 应 用 )， 而 不 会 破坏 之 前 所 学 到 的 经 验 法 则 。 不 过 生产 项 目 通常 很 快 会 
突破 这 个 项 目 结构 ， 因 为 控制 器 和 服务 的 复杂 性 将 迅速 增长 。 开 始 时 非常 普通 的 控制 器 和 
服务 通常 也 会 开始 包含 额外 的 业务 逻辑 。 随 着 项 目 开始 达到 单个 文件 无 法 容纳 所 有 组 件 的 
程度 (可 读 性 不 佳 )， 我 们 会 考虑 把 代码 分 割 成 一 种 接近 于 “中 型 项 目 ” 指 南 的 模式 ， 下 一 
节 将 进行 讲解 。 
3.4.2 ”中 型 项 目 


中 等 规模 项 目的 目录 结构 可 以 为 控制 器 、 指 令 和 服务 分 别 创建 一 个 目录 。 然 后 ， 每 个 
控制 器 、 指 令 和 服务 都 可 以 有 自己 的 文件 ， 或 者 几 个 小 型 的 组 件 可 以 共享 一 个 文件 。 此 类 
项 目的 一 个 好 样 例 是 第 1 章 演示 的 SotckDog 应 用 , 地址 为 github.com/diegonetto/stock-dog。 


另外 ， 该 应 用 的 样 例 代码 包含 了 一 个 medium project 目录 ， 其 中 包含 了 使 用 该 模式 构造 的 
项 目 骨 干 。 再 次 ， 该 应 用 将 从 js/appjs 文件 启动 : 
angular. 


module('foo', ['foo.controllers', 'foo.services', 'foo.directives']). 
config (function($rootScopeProvider) { 


// 在 这 里 添加 配置 逻辑 
]) 
该 应 用 现在 分 别 为 foo.controllers 和 foo.directives 模 块 创建 了 一 个 目录 ,但 是 foo.services 
模块 仍然 定义 在 单个 文件 中 。 这 就 是 说 services.js 与 之 前 的 样 例 相同 : 


angular. 
module('foo.services', []). 
factory('fooService', function() { 
// 空白 服务 
return {}; 
天 这 


不 过 ， 指 令 和 控制 器 现在 有 了 自己 的 目录 。controllersmodulejs 文 件 负 责 声 明 
foo.controllers 模 块 : 


angular.module('foo.controllers', []); 
目录 controllers 还 包含 了 一 个 负责 定义 FooController 的 文件 controllers/FooControllerjs : 


angular. 
module('foo.controllers'). 
controller('FooController', function($scope) { 
// 使 用 $scope 
}); 


最 后 ，js/appjjs 中 声明 的 foo 模块 将 被 用 在 index.html 文件 中 ， 用 于 启动 Web 页 面 : 


<html ng-app="foo" > 
<head> 
<title></title> 
</head> 


<body> 
<div ng-controller="FooController"> 
</div> 


<script type="text/javascript" src="../angular.j]s"></script> 
<script type="text/javascript" src="js/controllers/module.js"></script> 
<script type="text/javascript" src="js/controllers/FooController.js"> 
</script> 

<script type="text/javascript" src="]js/services.js"></script> 
<script type="text/javascript" src="js/directives/module.js"></script> 
<script type="text/javascript" src="js/directives/fooDirective.js"> 
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</script> 
<script type="text/javascript" src="js/app.js"></script> 
</body> 
</html> 
该 范例 是 对 小 型 项 目 目 录 结 构 的 自然 扩展 。 该 应 用 为 服务 使 用 了 单个 文件 ， 但 是 它 分 
别 为 控制 器 和 指令 使 用 了 单独 的 目录 ， 用 于 演示 当 小 型 应 用 开始 增长 到 无 法 适用 于 小 型 项 
目 模式 时 的 关键 点 ， 可 以 轻松 地 将 不 同 的 组 件 分 割 到 新 目录 中 的 不 同文 件 中 。 例 如 ， 如 果 
有 两 个 控制 器 变 得 越 来 越 重要 ， 那 么 可 以 创建 一 个 controllers 目录 ， 并 为 每 个 控制 器 使 用 
一 个 独立 的 文件 ， 而 不 必 改 变 目录 结构 的 其 余部 分 。 
中 型 项 目 范 例 可 以 满足 许多 应 用 。 不 过 ， 成 熟 的 应 用 有 时 也 会 增长 到 超出 该 范例 的 时 
候 : 可 能 有 太 多 的 控制 器 因为 合理 的 原因 保持 在 一 个 文件 夹 中 ， 因 此 我 们 希望 进一步 分 割 
项 目 ， 使 项 目的 各 种 组 件 变 得 可 管理 。 如 果 项 目 达 到 了 这 个 程度 ， 那 么 你 应 该 考虑 以 类 似 
于 “大 型 项 目 ” 指 南 的 范例 分 割 代码 ， 下 一 节 将 进行 详细 讲解 。 


3.4.3 ”大 型 项 目 


大 型 项 目 通过 按照 功能 对 AngularJS 组 件 进 行 分 组 的 方式 获 益 。 例 如 ， 如 果 现 在 有 一 
个 大 型 的 AngularJS 应 用 ， 那 么 我 们 可 能 希望 使 用 一 个 称 为 registration 的 独立 目录 (或 者 功 
E 组 )， 其 中 包含 controllers 、services 和 directives 目录 ， 每 个 目录 都 包含 了 应 用 注册 流 中 
的 唯一 组 件 。 这 些 不 同 目录 中 的 每 个 组 件 都 应 该 是 独立 于 彼此 的 ， 例 如 ，registration 目录 
中 的 控制 器 不 应 该 依赖 于 dashboard 目录 中 的 服务 。 在 多 个 功能 组 之 间 共 用 的 组 件 将 被 存 
储 在 目录 shared 中 。 根 据 我 们 的 需求 ， 每 个 功能 组 可 以 为 它 的 控制 器 、 指 令 和 服务 包含 单 
个 文件 或 者 目录 。 换 名 话说， 除了 对 shared 模块 的 潜在 依赖 之 外 ， 每 个 功能 组 都 将 按照 自 
己 是 一 个 独立 项 目的 方式 进行 组 织 。 为 了 提供 一 个 更 具体 的 样 例 ， 本 章 的 样 例 代 码 包含 了 
一 个 名 为 large_project 的 目录 ， 它 演示 了 这 种 目录 构建 模式 。 
large_project 目录 中 有 两 个 功能 组 : js/dashboard 和 js/registration。 另 外 ， 还 有 一 个 包 
含 了 公用 过 滤器 和 服务 的 js/shared 目录 。dashboard 组 包含 了 一 个 模块 定义 和 一 个 定义 了 所 
有 控制 器 的 文件 : 


angular.module ('foo.dashboard' 
['foo.dashboard.controllers', "foo.shared']): 


registration 组 稍微 有 点 复杂 ， 它 包含 了 一 个 控制 器 的 目录 ， 以 及 一 个 包含 了 所 有 指令 
的 文件 。 下 面 是 foo.registration 的 模块 定义 : 


angular.modulel( 
'foo.registration', 
[ 
'foo.registration.directives', 
'foo.registration.controllers', 
"foo.shared'" 


]) 7 
如 同 “ 中 型 项 目 ” 指 南 一 样 ， 该 目录 构建 范例 是 有 组 织 地 从 小 型 项 目的 目录 构建 指南 
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增长 而 来 。 为 了 开始 把 “中 型 项 目 ” 转 换 成 “大 型 项 目 ” 可 以 为 每 个 功能 组 创建 一 个 目录 ， 
并 将 该 功能 组 的 所 有 控制 器 、 指令 和 服务 都 移动 到 该 目录 中 。 另 外, 可 能 还 需要 创建 shared 
目录 , 这 样 就 可 以 把 功能 组 的 服务 以 及 仍然 按照 “中 型 ”项 目 指南 组 织 的 代码 存储 在 其 中 。 
通过 这 种 方式 ， 功 能 组 就 不 需要 依赖 于 仍然 按照 “中 型 ”项 目 指南 组 织 的 代码 (如 果 这 样 做 
的 话 ， 将 会 破坏 功能 组 应 该 彼此 独立 的 规则 )。 现 在 我 们 已 经 学 习 了 将 AngularJS 代码 组 织 
成 文件 的 一 些 不 同方 法 ， 接 下 来 将 学 习 的 是 两 个 解决 模块 加 载 问题 的 开源 工具 。 例 如 ， 在 
“大 型 项 目 ” 范 例 中 ，index.html 是 非常 复杂 的 ， 因 为 它 需要 使 用 一 个 认真 排序 的 script 标 
记 列 表 加 载 项 目的 所 有 JavaScript 文件 : 


<html ng-app="foo"> 
<head> 

<title></title> 
</head> 


<body> 
<div ng-controller="FooController"> 
</div> 


<script type="text/javascript" src="../angular.js"> 

</script> 

<script type="text/javascript" src="js/shared/filters.js"> 

</script> 

<script type="text/javascript" src="js/shared/services.js"> 

</script> 

<script type="text/javascript" src="js/shared/module.js"> 

</script> 

<script type="text/javascript" src="js/registration/controllers/ 

module.js"> 

</script> 

<script type="text/javascript" 
src="js/registration/controllers/FooController.js"> 

</script> 

<script type="text/javascript" src="js/registration/directives.js"> 

</script> 

<script type="text/javascript" src="js/registration/module.js"> 

</script> 

<script type="text/javascript" src="js/dashboard/controllers.js"> 

</acript> 

<script type="text/javascript" src="js/dashboard/module.js"> 

</script> 

<script type="text/javascript" src="js/app.js"> 

</script> 

</body> 
</html> 


随 着 应 用 中 文件 数量 的 增长 ,需要 在 HTML 中 包含 的 script 标记 的 数量 也 将 随 之 增加 。 
对 于 小 型 项 目 来 说 这 没什么 问题 ， 但 是 当 我 们 开始 使 用 “大 型 项 目 ”目录 结构 时 ， 就 需要 
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以 特定 的 顺序 使 用 script 标记 包含 JavaScript 文件 ， 这 将 使 HTML 变 得 非常 策 重 。 在 较 大 
的 应 用 中 ， 由 于 忘记 script 标记 的 顺序 或 者 忘记 包含 特定 的 文件 很 容易 引入 难以 追踪 的 问 
题 。 在 C 或 者 Python 这 样 的 编程 语言 中 , 每 个 代码 文件 都 将 负责 声明 自己 的 依赖 ， 而 编译 
器 (对 于 C 来 说 或 者 语言 运行 时 (对 于 Python 来 说 ) 将 负责 为 文件 提供 这 些 依赖 。 现 在 有 几 
个 开源 工具 允许 在 JavaScript 中 使 用 这 种 模式 , 这 样 就 不 需要 使 用 script 标记 显 式 地 列 出 文 
件 。 尽 管 可 以 通过 使 用 script 标记 显 式 地 列 出 所 有 文件 的 方式 构建 大 型 AngularJS 应 用 
(AngularJS 工程 师 Brian Ford 曾经 因为 写 下 这 么 一 句 话 而 出 名 :“ 尚 未 在 实际 中 看 到 任何 实 
例 因为 RequireJS 而 受益 ”), 但 是 我 们 会 发 现 模块 加 载 器 更 加 方便 , 这 是 一 种 解决 JavaScript 
中 声明 的 依赖 的 工具 ， 通 过 它 我 们 就 不 必 依赖 script 标记 。 在 下 一 节 ， 将 学 习 如 何 使 用 
RequireJS 和 Browerify 这 两 种 不 同 的 模块 加 载 工具 ， 它 们 将 使 AngularJS 中 的 JavaScript 
依赖 不 容易 出 错 。 


3.5 “模块 加 载 器 


随 着 应 用 的 增长 , 我 们 可 能 会 遇 到 的 一 个 问题 是 : 如 何 找到 页 面 中 包含 所 有 JavaScript 
依赖 的 正确 解决 方案 。 浏 览 器 端 JavaScript 依赖 的 根本 问题 在 于 ， 需要 通过 以 特定 顺序 列 
出 所 有 JavaScript script 标记 的 方式 在 HTML 中 加 载 JavaScript。 对 于 小 型 应 用 来 说 ， 将 依 
赖 包含 在 一 个 文件 中 ,并 在 另 一 个 文件 中 使 用 是 不 方便 的 。 对 于 大 型 应 用 来 说 ， 通 过 script 
标记 管理 JavaScript 是 异常 乏味 并 且 易 于 出 错 的 ， 随 着 代码 库 变 得 越 来 越 大 ， 就 需要 在 大 
量 页 面 中 重新 安排 script 标记 ， 而 这 只 是 为 了 保证 代码 不 被 破坏 ! 你 可 能 已 经 猜 到 了 ， 有 
几 个 开源 工具 解决 了 客户 端 JavaScript 依赖 的 问题 。RequreJS 是 完成 该 任务 的 一 个 非常 流 
行 的 工具 , 本 节 将 进行 讲解 。 另外 , 我 们 还 将 学 习 常见 的 NodeJS- 浏 览 器 编译 器 Browserify， 
它 为 浏览 器 端 JavaScript 提供 了 一 种 新 方式 。 


3.5.1 RequireJS 


RequireJS 是 用 于 异步 加 载 JavaScript 文件 的 一 个 框架 。 每 个 JavaScript 文件 都 将 列 出 
它 所 依赖 的 JavaScript 文件 ， 而 不 是 使 用 script 标记 显 式 地 在 HTML 中 列 出 所 有 文件 。 然 
后 RequireJS 将 通过 加 载 该 文件 依赖 的 方式 解决 依赖 , 再 加 载 真正 的 文件 。 另 外 ，JavaScript 
文件 将 通过 异步 的 方式 加 载 一 -这 就 是 说 ， 浏 览 器 将 在 等 待 RequireJS 加 载 JavaScript 文件 
的 同时 开始 演 染 页 面 。 此 时 的 性 能 是 理想 的 , 因为 异步 加 载 将 允许 浏览 器 在 等 待 JavaScript 
的 过 程 中 完成 一 些 有 用 的 工作 ， 而 不 是 阻塞 。 

在 接 下 来 的 样 例 中 , 将 使 用 RequireJS 构 建 之 前 “目录 结构 ”一 节 中 提 到 的 small project 
目录 。 该 样 例 演示 了 在 AngularJS 中 使 用 RequireJS 的 高 级 准则 。 可 以 在 本 章 样 例 代 码 的 
small project require 目录 中 找到 该 样 例 。small project require 目 录 与 之 前 使 用 的 
small project 基 本 是 一 致 的 ， 但 是 做 出 了 3 个 重要 的 改动 。 第 一 ，js 目 录 现 在 包含 了 一 个 名 
为 requirejs 的 文件 ， 毫 无 疑问 该 文件 定义 了 RequireJS 的 API。 第 二 ， 为 了 演示 如 何在 
RequireJS 中 使 用 嵌 套 依赖 ，foo.controllers 模 块 现在 依赖 于 foo.services 模 块 ，FooController 
现在 依赖 于 fooService。 small project Tequire/js/controllers .js 文件 中 foo.controllers 模 块 的 新 代 


码 如 下 所 示 : 


requirel( 
['js/services.js'], 
function() { 
angular. 


module('foo.controllers', 
controller('FooController', 


// Use fooService 
Ds 
1D); 


['foo.services']). 
function (fooService) { 


RequireJS 的 语法 非常 直观 。require0 函 数 将 接受 两 个 参数 ， 一 个 文件 的 列表 和 一 个 函 
数 。RequireJS 在 执行 函数 之 前 加 载 并 执行 列表 中 的 文件 一 次 ， 因 此 ， 在 之 前 的 代码 中 


foo.controllers 可 以 依赖 于 foo.services， 


而 不 必 担心 HTML 中 script 标 记 的 顺序 。 


配置 RequireJS 同样 非常 直观 .为 了 初始 化 RequireJS, 只 需要 给 它 一 个 模块 名 称 到 URL 


的 映射 ， 从 而 使 RequireJS 知道 到 哪 是 
的 映射 是 一 个 普通 的 标识 映射 。 例 如 


有 寻找 文件 。 对 于 small project_ require 项 目 来 说 ， 它 
，'js/services.js' 被 映射 到 "js/services.js'。 在 需要 从 远程 


服务 器 加 载 JavaScript 的 应 用 中 ， 可 能 需要 创建 一 个 不 平凡 的 映射 ， 但 是 标识 映射 足以 满 


足 该 样 例 。 接 下 来 是 新 的 appjs 文件 ， 


Var paths [ 
'js/controllers.js', 
'js/services.js', 
'js/directives.js' 

x 


var requireConfigPaths 
for (var i 
requireConfigPaths [paths[ 
} 
require.config({ 
paths: requireConfigPaths 
}) 


requirel( 
paths, 
function() { 
angular. 
modulel( 

op. 

[ 
'foo.controllers', 
'foo.services', 
"foo.directives'" 

] ) . 


现在 它 将 负责 启动 RequireJS 和 主 AngularJS 模块 : 


{ 
0; i < paths.length; ++i) { 


i]] = paths([i]; 


config (function($rootSscopeProvider) { 


// 在 这 里 添加 配置 逻辑 
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1D); 


angular .bootstrap (document, ['foo']); 
1D); 


在 之 前 的 样 例 中 ， 启 动 RequireJS 要 求 调用 require.config() 函 数 ， 并 传 入 一 个 包含 了 路 
径 映 射 的 配置 对 象 。 然 后 我 们 就 可 以 调用 require0 来 加 载 必需 的 文件 ， 并 声明 AngularJS 
模块 foo。 

你 可 能 想 知道 之 前 代码 中 调用 angularbootstrap0 的 原因 。 这 是 集成 AngularJS 和 
RequireJS 时 的 一 个 重要 难点 : 因为 JavaScript 文件 将 被 异步 加 载 ， 所 以 我 们 无 法 使 用 熟悉 
的 ng-app 语法 初始 化 应 用 。 当 AngularJS 尝试 加 载 ng-app 指令 中 指定 的 模块 时 , AngularJS 
可 能 尚未 加 载 该 模块 。 幸 亏 ，ng-app 指令 是 对 angular.bootstrap0) 函 数 的 一 个 简单 封装 ， 所 
以 可 在 RequireJS 完成 文件 的 加 载 之 后 ， 调 用 angular.bootstrap() 函 数 来 初始 化 应 用 。 

现在 RequireJS 已 经 被 集成 到 了 AngularJS 代码 中 ，small_project_require/index.html 可 
以 是 非常 简明 的 。 再 次 , 注意 接 下 来 的 html 标记 中 没有 ng-app 指令 , 因为 需要 在 RequireJS 
完成 文件 的 加 载 之 后 ， 调 用 angularbootstrap() 函 数 来 手动 初始 化 应 用 。 

<html> 

<head> 


<title></title> 
</head> 


<body> 
<div ng-controller="FooController"> 
</div> 


<script type="text/javascript" src="../angular.js"> 
</script> 
<script data-main="js/app.js" src="js/require.js"> 
</script> 
</body> 
</html> 


注意 ， 之 前 的 代码 只 使 用 了 两 个 script 标记 。 通 过 使 用 RequireJS 加 载 AngularJS， 可 
以 进一步 将 它 减少 为 一 个 script 脚本 。 随 着 项 目 发 展 到 需要 使 用 “中 型 项 目 ” 目 录 构建 指 
南 或 者 甚至 是 “大 型 项 目 ” 目 录 构 建 指 南 的 程度 ， 我 们 仍然 只 需要 使 用 两 个 script 标记 。 
但 是 将 在 每 个 文件 中 调用 require0) 显 式 地 列 出 该 文件 所 依赖 的 文件 。 

如 你 所 见 , RequireJS 是 一 个 用 于 加 载 JavaScript 依 赖 的 完美 工具 , 而 不 是 一 种 列 出 script 
标记 的 健壮 方式 。 另 外 ， 异 步 加 载 可 能 也 有 利于 性 能 。 不 过 ， 正 是 由 于 性 能 问题 ， 异 步 加 
载 在 RequireJS 之 外 并 不 是 一 个 流行 的 模式 : 不 论 JavaScript 文件 多 小 , 加 载 每 个 JavaScript 
文件 都 会 引起 一 个 最 小 的 性 能 开销 。 在 RequireJS 之 外 ,许多 JavaScript 项 目 会 连结 它们 的 
JavaScript 一 一 也 就 是 说 ， 它 们 将 把 所 有 的 JavaScript 文件 合并 成 单个 文件 ， 然 后 把 该 文件 
提供 给 浏览 器 。 这 最 小 化 了 需要 加 载 的 JavaScript 文件 的 数量 ， 与 异步 加 载 相 比 ， 对 于 某 
些 应 用 来 说 这 是 一 个 更 好 的 选择 。RequireJS 对 于 拥有 大 量 JavaScript 资源 ， 但 是 在 页 面 加 


载 时 不 需要 存在 的 应 用 来 说 是 非常 有 用 的 。 不 过 ， 在 许多 AngularJS 应 用 中 ，AngularJS 的 
大 小 比 应 用 代码 的 大 小 要 大 得 多 。 下 一 个 将 要 学 习 的 工具 是 Browserifyg， 它 提供 了 另 一 种 
加 载 模块 的 方式 ， 与 RequireJS 相 比 ， 这 是 更 有 利于 连结 的 方式 。 


3.5.2 Browserify 


如 果 熟 悉 服务 器 端 JavaScript 的 话 ， 那 么 可 能 会 好 奇 为 什么 Browserify 会 出 现在 模块 
加 载 器 列表 中 。 与 RequireJS 相 比 ，Browserify 并 不 是 被 设计 用 作 模 块 加 载 器 的 ， 但 是 作为 
该 产品 的 主要 目的 ， 它 为 浏览 器 端 模 块 加 载 提供 了 一 种 高 效 的 方式 : 将 NodeJS 样式 的 
JavaScript 编译 成 浏览 器 友好 的 形式 。NodeJS 是 一 种 流行 的 服务 器 端 JavaScript 运行 时 , 它 
拥有 大 量 优雅 的 功能 ， 包括 5 级 作用 域 和 用 于 导入 外 部 依赖 的 require0 全 局 函数 。 在 本 节 ， 
将 学 习 NodeJS require() 函 数 的 基础 知识 ， 以 及 如 何 通 过 Browserify 在 AngularJS 应 用 中 使 
用 NodeJS 以 更 加 结构 化 的 方式 实现 依赖 管理 。 

注意 出 于 本 节 的 目的 , 我 们 首先 需要 安装 NodeJS。 如 果 尚 未 安装 ， 可 浏览 http://www. 
nodejs.org/downloads 页 面 ， 为 自己 的 平台 选择 对 应 的 指令 。 

尽管 NodeJS 的 确实 现 了 JavaScript 语言 标准 ， 但 是 NodeJS 运行 时 在 根本 上 不 同 于 浏 
览 器 的 运行 时 。 尤 其 ， 在 浏览 器 端 JavaScript 中 看 到 的 全 局 对 象 document 和 window 在 
NodeJS 运行 时 中 并 不 存在 。 而 且 ，NodeJS 实行 的 是 5 级 作用 域 : 默认 情况 下 ， 在 文件 顶 
级 作用 域 中 使 用 var 声明 的 变量 在 其 他 文件 中 并 不 可 见 。 例 如 ， 如 果 现 在 有 两 个 JavaScript 
文件 foojs 和 barjs， 而 且 foojs 中 包含 了 下 面 的 代码 : 


var x = 1; 

如 果 barjs 通过 require() 函 数 包含 了 foo.js， 那 么 barjs 将 无 法 访问 变量 x 的 值 : 
require('./foo.js'); 

console.10g (x); // 未 定义 的 


为 了 导出 NodeJS 文件 中 的 函数 和 对 象 , 需要 显 式 地 将 它们 附加 到 module.exports( 或 者 
简写 为 exports) 对 象 中 。 例 如 ， 如 果 foojs 中 包含 了 下 面 的 代码 : 


exports.x = 1; 
那么 barjs 可 以 访问 x 变量 的 值 ， 如 下 所 示 : 
Var foo = require('./foo0.js'); 


console.log(foo.x); // 1 


在 之 前 的 样 例 中 关于 require0 函 数 有 两 个 重要 的 细节 需要 注意 。 首先，require() 的 返回 
值 是 来 自 所 需 文件 的 module.exports 对 象 。 其 次 , 传 入 到 require0 函 数 中 的 路 径 必须 是 相对 
于 调用 require0) 函 数 的 文件 的 (除非 该 路 径 不 在 node_modules 目录 中 , 我 们 很 快 将 学 到 这 一 
点 )。 换 句 话 说， 如 果 另 一 个 目录 中 的 第 三 个 文件 调用 了 barjs 中 的 require()， 那 么 barjs 
仍然 可 以 成 功 调用 require('./foo0jjs')。 
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NodeJS 还 允许 包含 node modules 目录 中 的 外 部 依赖 , 并 使 用 requireO 加 载 它们 ， 而 不 
必 使 用 相对 路 径 。 尤 其 是 ， 如 果 在 一 个 文件 中 调用 require('foo'), 而 且 在 该 文件 的 目录 中 没 
有 名 为 foo 或 者 foojs 的 文件 或 目录 存在 ， 那 么 NodeJS 将 会 遍历 项 目的 目录 树 寻 找 名 为 
node modules 的 目录 。 如 果 NodeJS 找到 了 该 目录 ， 它 将 在 node_ modules 目录 中 寻找 名 为 
foo 的 文件 或 者 目录 。 如 果 已 经 习惯 于 需要 以 相对 于 项 目 根 目 录 的 方式 包含 文件 的 编程 语 
言 ， 那 么 这 种 方式 似乎 难以 使 用 。 不 过 ，NodeJS 的 方式 也 有 它 自 己 的 优点 。 例 如 ，NodeJS 
代码 的 目录 结构 通常 被 认为 更 易于 重 构 ， 因 为 每 个 目录 不 需要 注意 它们 在 目录 结构 中 的 
位 置 。 

现在 我 们 已 经 了 解 了 require() 函 数 的 高 级 概念 ， 接 下 来 将 编写 一 些 NodeJS 样式 的 
AngularJS 代码 , 并 使 用 Browserify 把 该 代码 编译 成 浏览 器 友好 的 格式 。 可 以 通过 浏览 本 章 
样 例 代 码 的 根 目录 并 运行 npm install 命令 的 方式 安装 Browserifyg。 注 意 ， 为 了 完成 这 个 任 
务 , 需要 先 安装 NodeJS 和 npm。 如 果 尚 未 安装 它们 , 那么 请 从 http://nodejs.org/download 页 
面 安装 NodeJS。 运 行 npm install 命令 将 把 Browserify 下 载 到 本 章 样 例 代码 根 目录 下 的 
node_modules/browserify 目录 中 。 可 在 NodeJS 自身 使 用 Browserify， 但 是 使 用 Browserify 
最 简单 的 方式 就 是 将 它 用 作 命令 行 工 具 。 例 如 ， 请 考虑 这 两 个 简单 的 NodeJS 文件 
browserify_ modulejs 和 browserify_controllerjs， 可 以 在 本 章 样 例 代 码 中 找到 它们 。 首 先是 
browserify_controllerjs 文件 : 

module.exports = function($scope) { 


$scope.answer = 42; 
Fe 


接 下 来 是 browserify_modulejs 文件 : 


if (typeof window !== 'undefined' && window.angular) { 
Var myModule = angular.module('MyModule', []); 
myModule.controller ('BrowserifyController', 
require('./browserify controller.js')); 
} 
当然 ， 因 为 该 代码 使 用 了 require() 和 module.exports， 所 以 它 在 浏览 器 中 无 法 工作 。 这 
时 就 需要 使 用 Browserify 命令 行 工 具 了 .为 了 从 之 前 的 文件 中 生成 名 为 browserify_output.js 
的 浏览 器 友好 的 文件 ， 可 以 运行 下 面 的 命令 : 
./node modules/browserify/bin/cmd.js \ 
-0 ./browserify output.js ./browserify module.js 


为 方便 起 见 ， 本 章 样 例 代码 中 的 Makefile 为 之 前 的 命令 提供 了 一 个 方便 的 快捷 方式 : 
make browserify。 运 行 该 命令 后 ， 我 们 应 该 能 够 在 本 章 样 例 代码 的 目录 中 得 到 一 个 名 为 
browserify_outputjs 的 文件 ， 它 的 内 容 将 如 下 所 示 : 


(function el(t,n,r){/*...*/({1:[function (require,module, exports){ 
module.exports = function($scope) { 
$scope.answer = 42; 


}; 
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},{}],2:[function (require,module, exports){ 
if (typeof window !== 'undefined' && window.angular) { 
Var myModule = angular.module('MyModule', []); 
myModule.controller('BrowserifyController', 
require('./browserify controller.js')); 


} 


},{"./browserify controller.js":1}]},1{},[21); 


browserify_outputjs 看 起 来 有 点 难以 阅读 ， 但 是 它 是 可 以 在 浏览 器 中 运行 的 有 效 
JavaScript。 例 如 ， 考 虑 本 章 样 例 代码 中 的 browserify_example.html 文 件 。 


<body> 
<div ng-controller="BrowserifyController"> 
<hl>The answer is {{answer}}</hl> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="browserify output.js"></script> 
</body> 

在 之 前 的 代码 中 ， 可 以 使 用 在 browserify_controllerjs 文 件 中 声明 的 BrowserifyController，, 
并 在 browserify_ modulejs 的 MyModule 中 包含 它 。 编 译 了 browserify_outputjs 文 件 后 ， 就 可 
以 使 用 通过 NodeJS 的 require0 函 数 声 明 的 组 件 和 模块 ， 如 同 所 编写 的 是 传统 浏览 器 端 
JavaScript 一 样 。 

以 NodeJS 样 式 编写 浏览 器 端 JavaScript 的 关键 优点 在 于 NodeJS 的 require(0) 函 数 可 以 实现 
与 RequireJS 相 似 的 目的 。 尤 其 是 ，requireO) 函 数 允 许 在 JavaScript 代 码 中 包含 外 部 JavaScript 
文件 ， 而 不 是 依赖 于 script 标 记 。 

不 过 ，Browserify 与 RequireJS 有 一 个 关键 的 区 别 : Browserify 将 输出 单个 文件 ， 可 以 
在 页 面 中 使 用 script 标记 包含 它 。Browserify 没有 加 载 外 部 JavaScript 的 客户 端 机 制 ， 它 完 
全 是 一 个 编译 时 工具 ， 用 于 将 所 有 的 JavaScript 连结 成 一 个 浏览 器 友好 的 文件 。 相 反 ， 
RequireJS 将 在 浏览 器 中 进行 操作 ， 使 用 HTTP 加 载 所 需 的 额外 JavaScript。 因 此 ， 对 于 只 
加 载 所 需 的 JavaScript 代码 来 说 , Browserify 不 如 RequireJS, 因为 我 们 必须 使 用 Browserify 
为 每 个 页 面 编译 出 不 同 的 JavaScript 文件 。 

不 过 ， 这 个 缺点 在 特定 的 情况 下 可 能 是 一 个 巨大 的 优点 。 通 常 使 用 Browserify 编译 的 
AngularJS 应 用 简单 地 将 所 有 的 浏览 器 端 JavaScript 编译 成 单个 文件 、 压 缩 它 并 使 浏览 器 组 
存 它 。 一 旦 该 文件 被 缓存 后 ， 接 下 来 的 页 面 加 载 将 快 上 许多 ， 因 为 不 需要 再 加 载 额 外 的 
JavaScript。 这 个 权衡 就 在 于 首次 加 载 页 面 会 更 慢 一 些 。 实 际 上 ， 许 多 AngularJS 应 用 更 愿 
意 将 所 有 的 JavaScript 文件 连结 成 单个 文件 , 因为 即使 是 请 求 一 个 小 JavaScript 文件 也 会 因 
为 网 络 延 迟 而 引起 开销 。 作 为 编译 NodeJS JavaScript 的 副产品 ，Browserify 也 提供 了 连结 
功能 。 
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注意 : 

Browserify 通过 解析 代码 ， 并 通过 一 些 基 本 的 静态 分 析 来 解析 对 require() 函 数 的 调用 。 
特别 是 , 如 果 调 用 了 require('./foojs') ,那么 Browserify 将 在 输出 中 包含 ./foojs 文件 。 不 过 ， 
因为 Browserify 只 做 静态 分 析 ， 所 以 它 无 法 解析 传 入 变量 作为 参数 的 require0 函 数 。 例 如 ， 
Var x 二 './fo0.js' &&& require(x) 在 NodeJS 可 以 正常 工作 ， 但 是 Browserify 不 会 尝试 解析 x 的 
值 。 因 此 ， 如 果 选 择 使 用 Browserify， 你 应 该 只 传 入 硬 编 码 的 字符 串 到 requireO) 调 用 中 。 


使 用 Browserify 的 另 一 个 主要 优点 是 使 用 NodeJS 包 管理 器 npm 的 能 力 。 如 果 服 务 器 端 代 
码 也 使 用 NodeJS 编 写 ， 那么 在 代码 库 中 就 可 以 只 使 用 一 个 包 管理 器 。 即 使 服务 器 端 代码 并 
不 是 使 用 NodeJS 编 写 的 ， 与 客户 端 包 管理 器 (例如 Bower) 相 比 ，npm 通 常 是 更 加 优雅 和 易于 
使 用 的 。 另 外 ， 到 2014 年 为 止 npm 中 心 仓 库 已 经 提供 了 超过 100 000 个 包 ， 使 它 成 为 全 球 
最 大 的 包 生态 系统 。 通 过 Browserify， 可 以 在 浏览 器 端 JavaScript 使 用 这 些 包 。 例 如 ， 在 本 
章 之 前 使 用 了 一 个 名 为 event-emitter 的 模块 在 服务 之 间 传 播 事 件 。 实 际 上 ， 该 模块 最 初 是 为 
NodeJS 编 写 ， 并 通过 npm 分 发 的 。 本 章 使 用 的 event-emitterjs 文 件 使 用 Browserify 进 行 了 编 
译 ， 所 以 可 以 在 浏览 器 端 JavaScript 中 访问 它 。 


注意 : 

不 需要 使 用 Browserify 编译 整个 客户 端 JavaScript。 如 之 前 使 用 的 event-emitterjs 文件 ， 
可 以 使 用 Browserify 来 编译 将 在 浏览 器 中 使 用 的 特定 npm 模块 ， 并 使 用 script 标记 包含 该 
文件 。 Browserify 以 及 相似 的 工具 (例如 OneJS 和 Webmake), 通常 用 于 将 NodeJS JavaScript 
模块 编译 成 可 以 使 用 script 标记 包含 在 浏览 器 JavaScript 中 的 文件 。 例 如 Mongoose， 这 是 
一 个 NodeJS 模式 验证 工具 (第 10 章 将 进行 讲解 )， 它 拥有 的 一 个 浏览 器 组 件 是 使 用 
Browserify 编译 的 。 


现在 我 们 已 经 了 解 了 Browserify 在 为 浏览 器 编译 NodeJS 模块 中 的 作用 ， 接 下 来 将 学 
习 如 何在 Browserify 编译 的 AngularJS 应 用 中 使 用 event-emitter 模块 。 在 本 章 的 样 例 代码 
中 ， 可 以 看 到 event-emitter 模块 在 packagejjson 文件 中 被 列 为 依赖 。 


"dependencies": { 
"hrowsorify™: "6.3.2", 
"event-enitter": "0.3.1" 

' 


npm 将 在 package.json 文件 中 寻找 在 运行 bpm install 命令 时 需要 安装 的 依赖 。 当 运行 
npm install 时 ， 会 发 现 npm 在 node_modules 目录 中 创建 了 一 个 名 为 event-emitter 的 目录 。 
然后 就 可 以 使 用 require() 在 AngualrJS 应 用 中 包含 event-emitter: 


Var emitter = require('event-emitter'); 


if (typeof window !== 'undefined' && window.angular) { 
Var myModule = angular.module('MyModule', []); 
myModule.controller('BrowserifyController', 
function($scope) { 


$scope.emitter = emitter() 


$scope.numPings = 0; 
$scope.emitter.on('ping', function() { 
++$scope.numPings; 
FE) 
DD); 
} 


接 下 来 可 以 使 用 Browserify 命 令 行 工具 将 该 文件 编译 成 浏览 器 友好 的 单个 文件 
browserify emitter _output.js: 


./node modules/browserify/bin/cmd.js -o ./browserify emitter output.js \ 
-/browserify emitter module.js 


一 旦 编译 了 browserify_emitter_output.js 文 件 ， 就 可 以 使 用 script 标 记 包 含 它 ， 并 使 用 附 
加 到 BrowserifyController 作 用 域 的 事件 发 射 器 : 


<body> 
<div ng-controller="BrowserifyController"> 
<hl ng-click="emitter.emit('ping')"> 
You've Clicked This {{numPings}} Times 
</hl> 
</div> 


<script type="text/javascript" src="angular.js"></script> 

<script type="text/javascript" src="browserify emitter output.js"> 

</script> 

</body> 
如 你 所 见 , Browserify 允许 在 AngularJS 应 用 中 使 用 NodeJSrequire() 函 数 的 强大 能 力 和 

丰富 的 npm 生态 系统 。 与 RequireJS 相 比 ，Browserify 是 模块 加 载 问题 一 个 非常 独特 的 解 
决 方案 。Browserify 完全 是 一 个 编译 时 工具 ， 所 以 它 可 以 加 载 不 必要 的 模块 ， 但 是 它 确实 
将 所 有 的 依赖 都 加 载 到 了 一 个 文件 中 。 根 据 用 例 的 不 同 ， 这 可 能 会 成 为 优点 。 使 用 
Browserify 的 另 一 个 难点 是 : AngularJS 应 用 除非 经 过 Browserify 编译 ， 否 则 无 法 在 浏览 器 
中 运行 ， 这 将 使 调试 变 得 更 加 困难 。 这 些 困难 是 否 被 Browserify 巨大 的 优点 所 弥补 ， 这 取 
决 于 开发 团队 的 技能 集 以 及 服务 器 代码 是 否 使 用 NodeJS 编写 的 。 


3.6 ”构造 用 户 身份 验证 的 最 佳 实践 


本 节 将 被 把 本 章 所 学 到 的 概念 结合 在 一 起 ， 并 将 它们 提取 成 构建 AngularJS 登录 /注销 
功能 的 一 些 最 佳 实践 。 所 有 应 用 都 是 不 同 的 ， 但 是 几乎 所 有 应 用 都 有 一 些 用 户 身份 验证 的 
概念 。 本 节 将 使 用 用 户 身份 验证 作为 如 何 使 用 模块 、 服 务 、 控 制 器 和 指令 组 织 代码 的 个 案 
分 析 。 
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326:1 


服务 : 从 服务 器 加 载 数据 和 保存 数据 


因为 服务 最 多 只 实例 化 一 次 ， 所 以 服务 是 加 载 关 于 当前 登录 用 户 信息 的 理想 位 置 。 这 
意味 着 服务 可 以 在 实例 化 时 查询 服务 器 获取 数据 ， 然 后 所 有 控制 器 或 者 服务 都 可 以 使 用 该 
数据 ， 而 不 必 再 次 查询 服务 器 。 为 利用 这 一 点 ， 将 实现 一 个 名 为 userService 的 服务 ， 用 于 
周期 性 地 从 服务 器 得 到 用 户 信息 。 为 了 避免 创建 REST API 的 开销 ， 将 使 用 $timeout 模拟 
异步 HTTP 调用 。 接 下 来 是 使 用 了 S$timeout 的 userService 的 实现 。 可 以 在 authentication 
example.html 文件 中 找到 该 代码 : 


app.factory('userService', function($timeout) { 
var user = { 

loggedIn: false 

}; 


user.loadFromServer = function() { 

$timeout (function() { 
user.loggedIin = true; 
user.name = 'Username'; 

1s S00 

二 


user.login = function(username, password) { 
$timeout (function() { 
user.loggedIin = true; 
user.name = username; 
}, 500); 
] 7 


user.logout = function() { 
user.loggedIn = false; 
user.name = undefined; 


}; 


user.loadFromServer (); 
return user; 
Ws 


该 userService 实现 获得 了 与 用 户 身份 验证 相关 的 核心 功能 : 登录、 注销 和 加 载 关于 当 
前 用 户 的 数据 。 因 为 userService 只 会 实例 化 一 次 ， 所 以 loadFromServer() 将 在 服务 被 实例 


化 时 调 上 
3.6.2 


次 ，logout0 将 为 控制 器 、 服 务 和 指令 清除 用 户 数据 。 
控制 器 : 向 HTML 公开 API 


通常 , 我 们 会 希望 创建 一 个 顶级 控制 器 , 将 它 附 加 到 页 面 的 body 标记 中 或 者 一 个 包含 
了 所 有 内 容 的 div 标记 中 ， 用 于 公开 userService 从 服务 器 加 载 的 数据 ， 另 外 我 们 还 希望 创 
建 logout() 和 login() 函 数 。 这 将 使 HTML 可 以 访问 这 些 功能 ， 而 不 必 使 所 有 控制 器 都 依赖 
于 userService。 该 userService 实现 非常 适合 在 顶级 AppController 中 公开 ,因为 通常 需要 在 
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HTML 中 访问 它 ， 而 不 是 在 控制 器 中 。 换 名 话说， 通常 其 他 控制 器 不 会 直接 调用 logout() 
函数 。 而 是 通过 指令 调用 该 函数 ， 例 如 ngClick。 下 面 是 顶级 AppController 的 实现 : 

app .controller ('RppController'，function($scope，userService) { 

$scope.user = userService; 
DD); 
该 控制 器 将 通过 页 面 的 HTML 公开 userService 功能 。 再 次 , 回顾 一 下 控制 器 的 核心 目 

的 : 向 指令 公开 JavaScript 数据 和 函数 ， 从 而 使 指令 可 以 把 DOM 交互 绑 定 到 该 API 并 创 
建 用 户 体验 。 接 下 来 是 通过 内 置 指令 使 用 AppController 提供 的 API 的 一 个 基本 样 例 : 


<body ng-controller="AppController"> 
<div ng-show="user.1oggedIn"> 
<hl>{{user.name}}</hl> 
<input type="button™" 
ng-click="user.logout ()" 
Value="Log Out"> 
</div> 
<div ng-show="!user.1loggedIn"> 
<input type="button" 
ng-click="user.login('Username')" 
Value="Log In"> 
</div> 
</body> 


3.6.3 指令 : 与 DOM 进行 交互 


第 5 章 将 详细 讲解 自 定义 指令 的 编写 。 不 过 ， 出 于 构建 身份 验证 系统 的 目的 ， 将 主要 
关注 于 使 用 指令 创建 可 重用 的 HIML 组 件 。 可 重用 的 HIML 组 件 只 是 指令 常用 目的 的 一 
个 小 小 子 集 : 将 DOM 交互 绑 定 到 控制 器 提供 的 API。 接 下 来 ， 将 使 用 指令 构建 一 个 可 重 
用 的 login 指令 ， 整 个 应 用 中 都 可 以 使 用 它 : 


app.directive('login', function() { 
return { 

restrict: ''E', 

scope: true, 

template: 'Username: <input type="text" ng-model="username">' + 
"<br>" + 
"Password: <input type="password" ng-model="password">' + 
a 
"<input type="button" ng-click="login()" value="Log In">', 

controller: function($scope, userService) { 
$scope.login = function() { 

userService.login($scope.username, $scope.password); 
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然后 我 们 就 可 以 在 HIML 中 使 用 login 指令 ， 如 下 所 示 : 


<div ng-show="user.loggedIn"> 
<hl>{{user.name}}</h1l> 
<input type="button" 
ng-click="user.logout ()" 
Value="Log Out"> 


</div> 

<div ng-show="!user.loggedIn"> 
<login></1login> 

</div> 


使 用 指令 构建 可 重用 的 组 件 是 一 个 重要 的 最 佳 实践 ， 而 且 是 指令 的 一 个 常见 用 例 。 
3.7 小 结 


在 本 章 ， 我 们 学 习 了 组 织 AngularJS 代码 和 构建 应 用 的 最 佳 实践 。 尤 其 是 ， 我 们 了 解 
了 服务 、 控 制 器 和 指令 之 间 的 区 别 ， 以 及 每 个 组 件 适用 的 用 例 。 我 们 还 学 习 了 使 用 模块 将 
组 件 组 织 成 相关 的 组 ， 以 及 如 何 使 用 模块 创建 A/B 测试 。 了 解 了 不 同 规模 项 目的 目录 构建 
模式 。 最 后 ， 学 习 了 两 个 模块 加 载 器 ， 一 些 AngularJS 应 用 将 通过 它们 使 包含 JavaScript 
依赖 这 个 任务 变 成 一 个 不 容易 出 错 的 过 程 。 
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本 章 内 容 : 

e 如 何 创建 和 使 用 数据 绑 定 

。 数据 绑 定性 能 的 最 佳 实践 

e 如 何 将 过 滤器 绑 定 到 数据 绑 定 中 


本 章 的 样 例 代 码 下 载 : 
可 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选 项 卡 找 到 本 章 的 
wrIox.com 代 码 下 载 文 件 。 


4.1 数据 绑 定 


数据 绑 定 是 AngularJS 所 有 功能 的 核心 。 在 第 2 章 中 ， 我 们 已 经 看 到 了 一 些 使 用 { }} 
符号 的 基本 数据 绑 定 。 

从 高 级 别 上 看 ， 数 据 绑 定 是 把 两 个 JavaScript 值 绑 定 在 一 起 的 能 力 。 当 第 一 个 值 改变 
时 , 第 二 个 将 被 更 新 , 以 反映 第 一 个 值 的 改变 。 数据 绑 定 最 常见 的 用 例 就 是 把 用 户 界面 (UL 
通常 被 称 作 视图 ) 绑 定 到 一 组 独立 于 UI 的 值 (通常 称 为 模型 )。 模 型 将 由 简单 的 字符 串 、 数 
字 和 其 他 基本 JavaScript 类 型 组 成 。 通 过 使 用 数据 绑 定 ， 视 图 可 以 定义 如 何 泻 染 模型 。 


在 大 家 熟知 的 模式 的 上 下 文中 ， 例 如 模型 -视图 -控制 器 (MVC)， 你 可 能 已 经 听 说 过 术 
语 “ 模 型 ”和 “视图 ”。 可 将 “数据 绑 定 ”看 成 对 MVC 中 C 的 替代 品 。 出 于 这 个 原因 ， 
AngularJS 已 经 被 称 为 “客户 端 模型 -视图 -视图 管理 器 (MVVM)” 或 者 “模型 -视图 -无 所 谓 
(Model-View-Whatever，MVW)” 框 架 。 是 的 , “模型 -视图 -无 所 谓 ” 是 个 真正 的 技术 术语 。 
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数据 绑 定 允 许 在 超 文本 标记 语言 (HTML) 中 使 用 指令 将 视图 直接 绑 定 到 模型 ， 第 5 章 
将 会 进行 详细 讲解 。 为 了 更 好 地 理解 数据 绑 定 的 强大 功能 ， 将 使 用 一 个 简单 的 用 例 : 一 个 
根据 用 户 输入 到 文本 框 中 的 名 字 向 用 户 说 “Hello” 的 页 面 。 下 面 是 这 个 页 面 如 何 使 用 
jQuery( 一 个 流行 的 轻 量 级 JavaScript 库 ) 进 行 工作 的 样 例 : 


<input type="text" id="username"> 
<div> 
Hello, 
<span id="display username"> 
</span> 
</div> 


<script type="application/javascript"> 
$ (document) .ready (function() { 
$('#username') .on('keyup', function() { 
$('#display username') .html ($('#username') .val ()); 
3 
及 
</script> 


如 果 具 备 UI 开发 经 验 ， 这 看 起 来 可 能 有 点 熟悉 。 在 特定 UI 元 素 上 为 特定 的 事件 赋予 
事件 处 理 程序 是 大 多 数 常见 UI 工具 箱 中 的 标准 模式 ， 无 论 是 Android、iOS、Swing 或 者 
jQuery。 不 过 ，AngularJS 数据 绑 定 将 反 转 这 个 模式 ， 它 将 在 HTML 中 以 声明 的 方式 定义 
这 些 处 理 程序 。 


<div ng-controller="HelloController"> 
<input type="text" id="username" ng-model="username"> 
<div> 
Hello, 
<span id="display username"> 
{{ username }} 
</span> 
</div> 
</div> 


<script type="text/javascript"> 
function HelloController($scope) { 
$scope.username = ""; 
} 
</script> 


在 之 前 username 变量 周围 的 {{ }} 符 号 是 单 向 数据 绑 定 的 一 个 样 例 。 该 符号 是 下 面 代码 
的 简写 : 


<span id="display username" ng-bind="username"></span> 


特性 ngBind 是 一 个 指令 ， 它 将 告诉 AngularJS 该 span 有 一 个 绑 定 到 username 变量 的 
单 向 绑 定 。 换 名 话说，ngBind 将 告诉 AngularJS， 每 次 username 的 值 改变 时 ，span 的 内 容 
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应 该 随 着 更 新 ， 以 反映 username 的 新 值 。AngularJS 的 数据 绑 定 将 负责 除了 这 个 统计 工作 ; 
你 只 需 保 证 username 含有 正确 的 值 。 

特性 ngModel 是 一 个 在 输入 字段 和 变量 username 之 间 创 建 双向 数据 绑 定 的 指令 。 换 句 
话说 ， 当 输入 字段 的 值 因为 用 户 输入 而 改变 时 ，usermame 的 值 也 将 随 之 更 新 ， 以 反映 输入 
字段 的 新 值 。 另 外 ， 当 变量 username 的 值 改 变 时 ， 输 入 字段 的 值 将 改变 为 username 的 新 
值 。 在 下 面 的 样 例 中 可 以 自己 尝试 一 下 ， 添 加 一 个 按钮 ， 用 于 清除 username 变量 : 


<div ng-controller="HelloController"> 
<input type="text" id="username" ng-model="username"> 
<button ng-click="clear()"> 
Clear Username 
</button> 
<div> 
Hello, 
<span id="display username"> 
{{ username }} 
</span> 
</div> 
</div> 


<script type="text/javascript"> 
function HelloController($scope) { 
$scope.username = ""; 


$scope.clear = function() { 
$scope.username = ""; 
}; 
} 
</script> 
如 果 认 真 阅读 , 可 能 会 注意 到 之 前 代码 中 使 用 的 新 类 型 指令 :ngClick。 可 以 使 用 onClick 
特性 在 HTML 中 内 嵌 JavaScript 单 击 处 理 程序 ， 那 么 为 什么 还 需要 一 个 特殊 的 指令 呢 ? 这 
个 问题 的 完整 答案 要 求 对 指令 的 内 部 工作 机 制 有 更 深入 的 理解 ， 第 5 章 将 进行 深入 讲解 。 
不 过 , 从 高 级 别 看 , 我 们 应 该 使 用 ngClick 附加 单 击 处 理 程序 , 而 不 是 onClick, 因为 ngClick 
绑 定 了 AngularJS 两 个 强大 的 和 完整 的 组 件 ， 作 用 域 和 $digest 循环 。 接 下 来 将 详细 讲解 这 
在 之 前 的 两 个 样 例 中 ， 我 们 看 到 了 ngClick 将 以 一 种 不 同 于 ngBind 的 方式 与 数据 绑 定 
进行 交互 。 通 常 ， 指 令 与 数据 绑 定 的 交互 分 为 三 类 : 1) 通 过 单 向 绑 定 只 负责 显示 数据 的 指 
令 ， 例 如 ngBind，2) 封 装 了 事件 处 理 程序 的 指令 ， 例 如 ngClick，3) 实 现 双向 绑 定 的 指令 ， 
例如 ngModel。 从 高 级 别 看 ， 这 些 不 同类 型 的 指令 在 如 何 与 作用 域 中 JavaScript 数据 的 交 
互 上 是 不 同 的 。 第 一 类 指令 被 称 为 只 读 指令 。 这 种 类 型 的 指令 指定 了 如 何 显示 数据 的 规则 ， 
而 不 是 如 何 修改 数据 。 第 二 类 指令 是 一 个 事件 处 理 程序 封装 器 。 此 类 指令 不 泻 染 数据 ， 但 
是 它们 可 以 修改 数据 。 第 三 类 也 是 最 后 一 类 指令 : 双向 指令 ， 既 泻 染 也 修改 数据 。 注 意 这 
些 定义 实际 上 并 不 是 AngularJS 代码 库 的 一 部 分 。 这 里 只 是 将 它们 展示 为 一 个 工具 ， 用 于 
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帮助 把 指令 分 类 为 更 加 更 容易 理解 的 块 ， 如 表 4-1 所 示 。 
表 4-1 指 类 分 类 


指令 分 类 是 否 泻 染 数 据 | 是 否 修改 数据 在 该 分 类 中 的 内 置 指令 样 例 
特 


ngBind, ngBindHtml, ngRepeat, ngShow, ngHide 


ngClick, ngMouseenter, ngDblclick 
封装 器 


现在 我 们 已 经 更 了 解数 据 绑 定 的 魔力 了 。 在 真正 开始 挖掘 数据 绑 定 如 何 工 作 和 如 何 高 
效 使 用 它 的 细节 之 前 ， 将 回 退 一 步 ， 学 习 数据 绑 定 的 优点 是 什么 。 


4.2 数据 绑 定 的 作用 


与 直接 使 用 事件 处 理 程序 相 比 ， 使 用 数据 绑 定 主要 有 3 个 优点 。 第 一 ， 模 型 和 控制 器 
逻辑 是 完全 独立 于 UI 的 。 在 之 前 的 代码 中 ， 可 以 添加 另 一 个 绑 定 到 变量 username 的 UI 
元 素 , 或 者 也 可 以 创建 男 一 个 元 素 ， 只 在 定义 了 usemame 时 显示 ， 这 些 改动 都 不 需要 改变 
控制 器 代码 。 控 制 器 代码 可 以 加 载 数据 ， 并 向 HTML 提供 应 用 编程 接口 (APD， 用 于 操作 
数据 、 加 载 和 保存 数据 ， 而 UI 中 展示 数据 的 方式 则 可 以 在 HTML 和 层 装 样式 表 (CSS) 中 
实现 。 

由 AngularJS 提供 的 视图 和 控制 器 之 间 的 清晰 分 离 在 单 人 项 目 中 是 非常 有 价值 的 ， 但 
是 请 耐心 等 待 看 它 能 为 跨 领 域 团 队 完 成 什么 。 在 生产 团队 中 ， 可 能 有 至 少 一 个 人 专注 于 用 
户 界 面 /用 户 体验 (UVUX)。 换 句 话 说， 可 能 有 一 个 或 多 个 开发 者 负责 从 服务 器 抓 取 数据 (也 
称 为 模型 ) 到 浏览 器 ， 有 一 个 或 多 个 设计 者 负责 将 数据 展示 给 用 户 。 

没有 AngularJS, 在 模型 和 视图 之 间 的 胶水 代码 是 一 个 灰色 区 域 。 实 际 上 ， 最 终 将 会 出 
现 开发 者 和 设计 者 相互 踩 脚 指 的 情况 。 一 个 经 典 的 焉 梦 场景 是 : 当 设计 师 浏览 并 调整 所 有 
的 CSS 类 时 ， 通 常 需要 更 新 胶水 代码 确保 它 正 在 使 用 正确 的 CSS 类 创建 元 素 。 即 使 是 强 
大 的 MVC 框架， 例如 BackboneJS， 分 离 代码 和 设计 也 几乎 是 不 可 能 的 。 此 时 就 需要 让 设 
计 师 调整 JavaScript 或 者 让 开发 者 决定 如 何 泻 染 数据 。 

通过 数据 绑 定 ， 设 计 师 不 需要 编写 JavaScript 代码 ， 开 发 者 也 不 需要 调整 HIML。 相 
反 ， 在 一 个 理想 的 世界 中 ， 这 两 个 角色 将 通过 良好 定义 的 API 进行 交互 ， 开 发 者 负责 编写 
JavaScript 函数 和 公开 控制 器 中 的 变量 ， 设 计 师 负 责 在 HTML 中 使 用 指令 (例如 ngCliclo) 绑 
定 这 些 它们 。 

另外 , 数据 绑 定 还 允许 在 声明 式 语 言 (例如 HIML) 中 编写 更 多 的 代码 , 在 命令 式 语 言 ( 例 
如 JavaScripb 中 编写 较 少 的 代码 。 一 般 来 说 ， 命 令 式 编程 涉及 为 计算 机 提供 如 何 执行 任务 
的 精确 指令 。 与 此 相对 ， 声 明 式 编程 允许 指定 希望 发 生 的 事情 ， 并 且 人 允许 计算 机 优化 如 何 
完成 的 细节 。 或 者 换 句 话说 ， 在 命令 式 编程 中 使 用 的 是 动词 ， 而 在 声明 式 语言 中 ， 例 如 
HTML, 编写 的 只 是 名 词 。 命 令 式 和 声明 式 编程 的 准确 技术 定义 更 加 复杂 也 易于 引起 争辩 ， 
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但 是 知道 命令 式 编程 语法 使 高 级 概念 (例如 数据 的 图 形 泻 染 ) 更 加 简单 就 足够 了 。 

声明 式 语言 倾向 于 更 加 简洁 ， 并 且 更 有 利于 UVUX 开发 ， 因 为 从 根本 上 讲 UI 是 基于 
含有 相关 潜在 操作 的 对 象 构建 的 。 这 意味 着 与 其 显 式 地 编写 代码 构造 UI 对 象 ， 不 如 定义 
希望 如 何 构造 对 象 ， 并 让 浏览 器 处 理 泻 染 细节 。 想 象 一 下 使 用 jQuery 构建 整个 页 面 结构 的 
混乱 场景 ! 使 用 过 Java Swing 包 的 开发 者 将 会 想起 在 Java 代码 中 必须 构建 框架 和 按钮 的 完 
整 结构 的 挫败 感 一 一 难怪 Swing UI 看 起 来 如 此 糟糕 ! 

通过 使 用 AngularJS 数据 绑 定 ，HTML 不 仅 可 以 定义 UI 结 构 ， 还 可 以 定义 UX 结构 。 
因为 UX( 决 定 用 户 可 以 采用 的 具体 操作 ) 被 定义 在 HIML 中 ， 不 需要 与 事件 处 理 程序 绑 定 
代码 (过 于 元 长 而 且 容易 填 满 全 局 作用 域 ) 迭 和 在 一 起 。 

最 后 ，AngularJS 作用 域 为 组 织 代码 提供 了 一 个 简洁 框架 。ng-controller 指令 每 次 将 创 
建 一 个 HelloController 新 实例 , 所 以 UI 可 以 在 不 同 的 位 置 重用 控制 器 , 而 不 必 对 JavaScript 
做 出 改变 。 例 如 ， 可 让 HelloController 以 不 同 的 语言 问候 用 户 。 


<div ng-controller="HelloController"> 
English: 
<input type="text" ng-model="username"> 
<div ng-click="clear ()"> 
Clear Username 
</div> 


<div> 
Hello, 
<span> 
{{ username }} 
</span> 
</div> 
</div> 


<br> 
<br> 


<div ng-controller="HelloController"> 
Spanish: 
<input type="text" ng-model="username"> 
<div ng-click="clear () "> 
Clear Username 
</div> 


<div> 
Hola, 
<span> 
{{ username }} 
</span> 
</div> 
</div> 
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<script type="text/javascript"> 
function HelloController($scope) { 
$scope.username = "" 


$scope.clear = function() { 
$scope.username = ""; 
i 
} 
</script> 
在 运行 之 前 的 代码 时 ,可 能 会 注意 到 两 个 usemame 变量 是 相互 独立 的 。 可 以 在 第 一 个 
中 输入 Jack， 在 另 一 个 中 输入 Juan， 对 应 的 div 元 素 将 分 别 显示 Hello, Jack 和 Hola, Juan。 
这 就 是 AngularJS 在 每 次 使 用 ng-controller 指令 时 创建 一 个 新 的 作用 域 所 产生 的 结果 。 附加 
了 HelloController 的 每 个 div 元 素 都 有 自己 的 HelloController 实例 和 自己 的 username 变量 。 
AngularJS 中 的 作用 域 是 极其 强大 的 工具 ， 它 们 在 数据 绑 定 的 使 用 中 具有 不 可 或 缺 的 作用 。 
因此 ， 值 得 进一步 讲解 什么 是 作用 域 ， 以 及 它们 的 作用 。 


4.3 AngularJS 作用 域 


一 个 极其 强大 的 AngularJS 特性 就 是 : 在 文档 对 象 模型 (DOM) 中 引入 了 作用 域 。 作 用 
域 是 AngularJS 表达 式 的 一 个 执行 上 下 文 。 一 个 表达 式 是 包含 了 JavaScript 代码 的 字符 串 ， 
它们 将 由 AngularJS 执行 。 例 如 ，ngClick 和 ngModel 特性 的 值 ， 以 及 {{ 他 符 号 中 的 内 容 都 
是 表达 式 。 在 底层 ，AngularJS 将 解析 这 些 表 达 式 并 在 所 关联 的 作用 域 中 执行 它们 。 要 记 住 
的 一 个 关键 点 是 表达 式 不 同 于 控制 器 中 的 代码 : AngularJS 将 以 自己 的 方式 解析 和 执行 表达 
式 ， 而 控制 器 代码 将 直接 在 浏览 器 中 运行 。 在 表达 式 中 工作 的 代码 可 能 无 法 在 控制 器 中 工 
作 ， 反 之 亦 然 。 

在 之 前 的 小 节 中 ， 我 们 看 到 了 ng-controller 指 令 ， 它 将 创建 一 个 新 的 作用 域 ， 附 加 到 指 
令 的 表达 式 可 以 访问 它 。 就 像 在 JavaScript 中 一 样 ， 作 用 域 在 使 代码 更 加 模块 化 和 更 加 易于 
使 用 上 有 着 宝贵 的 作用 。 例 如 ， 通 过 作用 域 的 能 力 ， 在 相同 的 页 面 中 有 两 个 独立 的 
HelloController 实 例 。 另外, 翌 套 在 ng-controller 中 的 ngClick , ngModel , and ngBind 表 达 式 都 
可 以 访问 正确 的 作用 域 实例 。 

大 多 数 其 他 JavaScript 库 只 提供 了 对 内 置 HTML 事件 处 理 程 序 (例如 onClick) 的 简单 封 
装 。 这 些 库 都 有 一 个 致命 的 缺点 : 在 HTML 中 事件 处 理 程序 里 调用 的 函数 必须 在 页 面 的 全 
局 作用 域 (通常 被 称 为 window) 中 可 见 。 依 赖 于 全 局 状态 将 使 代码 难于 管理 。 例 如 ， 我 们 可 
能 使 用 onClick 和 全 局 状态 编写 了 HelloController 样 例 。 此 时 如 果 希 望 添加 另 一 种 语言 , 例 
如 French， 就 必须 在 window 对 象 中 添加 HelloController 的 另 一 个 实例 。 还 必须 保证 这 个 
新 的 实例 不 会 覆盖 其 他 元 素 依 赖 的 任何 全 局 状态 。 另 外 ， 还 需要 让 DOM 知道 应 该 访问 哪 
个 HelloController， 这 对 于 简单 的 任务 来 说 太 复杂 了 。 

不 过 ， 通 过 DOM 中 的 作用 域 ， 使 用 HIML 中 的 事件 处 理 程序 变 得 更 加 可 行 。 你 可 能 
注意 到 了 传 入 到 控制 器 中 的 第 一 个 参数 是 $scope， 它 对 应 于 ng-controller 指令 创建 的 作用 
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域 。 然 后 ， 我 们 就 可 以 使 用 控制 器 中 的 变量 和 函数 增强 这 个 作用 域 。 注 意 ， 只 能 从 $scope 
及 其 子 作 用 域 访问 这 些 函数 。AngularJS 将 为 每 个 页 面 创建 一 个 根 作用 域 ， 所 有 由 
ng-controller 或 者 其 他 指令 创建 的 作用 域 是 根 作用 域 的 子 作用 域 .需要 直接 使 用 根 作用 域 的 
情况 并 不 多 ， 但 是 以 防 万 一 ， 需 要 知道 可 以 在 控制 器 中 通过 依赖 注入 访问 根 作 用 域 : 
S$rootScope。 


4.3.1 作用 域 继承 


AngularJS 中 的 DOM 作用 域 非常 类 似 于 JavaScript 语言 自身 的 作用 域 。 在 JavaScript 
中 ， 像 关键 字 这 样 的 函数 (例如 for 和 这 将 创建 子 作用 域 ， 这 将 允许 我 们 使 用 var 关键 字 定 
义 作用 域 中 的 本 地 变量 。 

毫 无 疑问 ，AngularJS 中 对 等 的 ngRepeat 和 ngIf 将 也 在 DOM 创建 作用 域 。 作 用 域 将 
使 用 基于 原型 的 继承 方式 继承 它们 的 父 作用 域 , 并 在 $parent 字段 中 保存 父 作用 域 的 一 个 指 
针 ， 所 以 子 作 用 域 可 以 访问 父 作用 域 中 的 变量 。 在 DOM 中 可 以 访问 完整 的 作用 域 链 : 


<div ng-controller="LanguagesController"> 
<div ng-repeat="language in languages" 
ng-controller="HelloController"> 
{{ language.name }}: 
<input type="text" id="username" ng-model="username"> 
<div> 
{{ greet (language, username) }} 
</div> 
</div> 
</div> 


<script type="text/javascript"> 
function LanguagesController($scope) { 
$scope.languages = [ 
{ name : "English", greeting : "Hello, " }, 
{ name : "Spanish", greeting : "Hola, "} 


]; 


$scope.greet = function(language, name) { 
return language.greeting + " " + name; 
} 


function HelloController($scope) { 
$scope.username = ""; 


</script> 


作用 域 是 非常 强大 的 工具 ， 如 果 我 们 从 蜘蛛 侠 中 学 到 了 什么 ， 那 就 是 能 力 越 大 ， 责 任 
也 越 大 。 使 用 AngularJS 时 ， 搬 起 石头 砸 自己 的 脚 最 常见 的 方式 之 一 就 是 : 忘记 了 尽管 可 
以 读 取 父 作用 域 中 的 变量 ， 但 是 AngularJS 不 会 允许 我 们 为 父 作用 域 赋值 。 这 个 错误 最 容 
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易 使 用 一 个 看 起 来 似乎 完全 无 害 的 样 例 进行 说 明 。 可 将 之 前 样 例 中 的 英语 版 本 和 西班牙 版 
本 的 username 绑 定 到 单个 变量 。 可 以 尝试 把 username 变量 移动 到 LanguagesController 中 ， 
例如 : 


<div ng-controller="LanguagesController"> 
<div ng-repeat="language in languages" 
ng-controller="HelloController"> 
{{ language.name }}: 
<input type="text" id="username" ng-model="username"> 
<div> 
{{ greet (language, username) }} 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
function LanguagesController($scope) { 
$scope.languages = [ 
{ name : "English", greeting : "Hello, " }, 
{ name : "Spanish", greeting : "Hola, "} 
] 7 
$scope.greet = function(language, name) { 
return language.greeting + " " + name; 
}; 
$scope.username = "Juan"; 
} 
function HelloController($scope) { 
} 
</script> 


不 过 ,在 尝试 运行 该 代码 时 ,我 们 会 看 到 在 英语 输入 中 填 入 John 时 ,西班牙 输入 不 会 
改变 。 真 正 让 人 感到 郁闷 的 是 两 个 输入 开始 都 将 显示 Juan。 这 里 出 现 了 什么 问题 ? 尽管 
ngModel 可 以 读 取 父 作用 域 中 username 变量 的 值 ,但 是 它 只 可 以 将 该 变量 赋 给 当前 作用 域 。 
因此 ， 当 英语 输入 改变 时 ，ngModel 指令 将 通过 HelloController 的 副本 在 定义 它 的 作用 域 
中 创建 一 个 新 的 username 变量 。 

为 解决 这 个 问题 , 可 使 用 ngChange 指令 , 而 且 可 以 在 父 作 用 域 中 调用 函数 。 ngChange 
指令 将 在 每 次 对 应 输入 的 值 改变 时 计算 附加 的 表达 式 ， 所 以 可 以 使 用 它 在 每 次 用 户 名 改变 
时 调用 LanguagesController 中 的 函数 : 


<div ng-controller="LanguagesController"> 
<div ng-repeat="language in languages" ng-controller= 
"HelloController"> 
{{ language.name }}: 
<input type="text" 
ng-model="username™" 
ng-change="updateUsername (username) "> 
<div> 
{{ greet (language, username) }} 
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</div> 
</div> 
</div> 


<script type="text/javascript"> 
function LanguagesController($scope) { 

$scope.languages = [ 
{ name : "English", greeting : "Hello, " }, 
{ name : "Spanish", greeting : "Hola, "} 

]; 

$scope.greet = function(language, name) { 
return language.greeting + " " + name; 

BB 


$scope.username = "Juan"7 


$scope.updateUsername = function(username) { 
$scope.username = username; 
} 
} 


function HelloController($scope) { 
} 
</script> 

AngularJS 也 允许 禁用 作用 域 继 承 。 作用 域 可 以 被 标记 为 隔离 的 , 这 意味 着 它 不 会 继承 
父 作 用 域 。 第 5 章 详 细 讲 解 指 令 时 将 讨论 隔离 作用 域 。 

搬 起 石头 砸 自己 的 脚 男 一 种 常见 的 方式 就 是 忘记 在 AngularJS 表达 式 中 无 法 访问 全 局 
window 对 象 中 的 函数 。 例 如 ,encodeURIComponent 函数 将 转换 在 URL 中 使 用 的 字符 串 值 。 
几乎 所 有 与 服务 器 通信 的 JavaScript 程序 都 会 使 用 encodeURIComponent。 该 函数 被 附加 到 
了 window 上 ， 并 且 可 以 通过 window.encodeURIComponent 访问 。 为 演示 这 一 点 ， 下 面 是 
几乎 所 有 刚 开 始 使 用 AngularJS 的 人 都 会 犯 的 错误 : 


{{ encodeURIComponent (username) }} 


当 尝 试 执行 该 表达 式 时 ,会 注意 到 AngularJS 错误 处 理 程序 被 触发 了 , 并且 UI 中 的 span 
是 空 的。 这 是 因为 表达 式 被 严格 限制 为 使 用 当前 作用 域 和 它 的 祖先 作用 域 中 的 变量 ， 不 允 
许 使 用 全 局 状态 或 者 函数 。 事实 上 ，AngularJS 在 在 线 文 档 中 将 它 自己 描述 为 “对 全 局 对 象 
有 致命 的 过 敏 ”。 无 论 这 是 一 个 问题 还 是 一 个 特性 都 由 你 自己 决定 。 无 论 如 何 ，AngularJS 
从 第 一 个 公开 发 布 版 本 开始 就 无 法 在 表达 式 中 访问 window 对 象 ， 在 不 久 的 将 来 也 不 可 能 
改变 。 

不 过 ， 可 在 控制 器 中 访问 encodeURIComponent 函数 。 如 果 回 顾 一 下 表达 式 中 代码 和 
控制 器 中 代码 的 区 别 (后 者 由 AngularJS 解析 和 执行 ， 而 前 者 由 浏览 器 的 解释 器 直接 执行 )， 
就 不 会 再 感到 惊讶 。 因 为 它们 的 代码 将 直接 在 浏览 器 中 运行 , 所 以 控制 器 可 以 访问 window 
对 象 。 在 表达 式 中 访问 encodeURIComponent 函数 的 一 种 方式 是 将 该 函数 附加 到 控制 器 中 


133 


AngularJS 高 级 编程 


的 作用 域 。 
$scope .encodeURIComponent = window.encodeURIComponent 


不 过 , 如 果 发 现 自己 需要 将 encodeURIComponent 附加 到 编写 的 所 有 控制 器 作用 域 中 ， 
那么 这 种 方式 是 让 人 诅 丧 的 。 不 要 担心 ， 还 有 一 种 好 的 AngularJS 方式 可 以 从 表达 式 中 访 
问 encodeURIComponent。 在 本 章 的 最 后 一 节 “ 过 滤器 和 数据 绑 定 ”中 将 学 习 这 个 解决 方案 。 

除了 存储 数据 ， 作 用 域 还 有 3 个 重要 的 函数 对 于 数据 绑 定 的 工作 方式 是 非常 关键 的 。 
注意 ; 本 书 将 不 断 地 提 到 这 些 函 数 。 这 些 函数 被 称 为 Swatch、$apply 和 $digest。 


1. $watch 


$watch 组 成 了 双向 数据 绑 定 的 一 边 : 通过 它 可 以 设置 一 个 回调 函数 ， 在 指定 的 表达 式 
改变 时 调用 。 回 调 函数 通常 被 引用 为 监视 器 。$watch 的 一 个 简单 应 用 是 在 每 次 用 户 改变 名 
称 时 更 新 firstName 和 lastName 变量 : 


$scope.$watch('name', function(value) { 
Var firstSpace = (value || "") .indexof(' '); 
if (firstSpace == -1) { 
$scope.firstName = value; 
$scope.lastName = ""; 
} else { 
$scope.firstName = value.substr(0, firstSspace); 
$scope.lastName = Value.substr(firstSpace + 1); 
} 
1); 
从 内 部 看 ，$watch 是 一 个 普通 的 函数 。 每 个 作用 域 都 维护 了 一 个 监视 器 的 列表 ， 被 称 
为 $scope.$$watchers。$watch 简单 地 添加 了 一 个 新 的 监视 器 ， 其 中 包含 了 一 些 内 部 记录 ， 
用 于 记录 表达 值 的 最 后 计算 值 。 


2. $apply 


$apply 组 成 了 双向 数据 绑 定 的 另 一 边 : 它 将 通知 AngularJS 某 些 东西 改变 了 ，$watch 
表达 式 的 值 应 该 重新 计算 。 通 常 我 们 不 需要 自己 调用 $apply, 因为 AngularJS 的 内 置 指令 ( 例 
如 ngClick) 和 服务 (例如 $timeout) 将 会 调用 $apply。 

最 可 能 在 自 定义 事件 处 理 程序 的 上 下 文中 遇 到 的 是 Sapply。 当 事件 发 生 时 ， 例 如 用 户 
单 击 了 按钮 或 者 一 个 未 完成 的 HITP 请 求 结束 了 ，AngularJS 需要 得 到 通知 , 模型 可 能 已 经 
改变 了 。 出 于 这 个 原因 ，ngClick 和 ngDblclick 这 样 的 指令 将 在 内 部 调用 $apply。 

另 一 个 样 例 是 :如 果 要 自己 实现 AngularJS 的 $http 服务 的 简单 替代 品 ， 就 需要 在 对 作 
用 域 做 出 改动 之 后 使 用 $apply， 用 于 保证 AngularJS 注意 到 模型 可 能 已 经 改变 。 例如 ,可 以 
使 用 $.get 函数 (而 不 是 AngularJS 的 Shttp 服务 ) 向 OpenWeatherMap API 查询 New York City 
当前 的 天 气 状 况 : 


<div ng-controller="HttpController"> 
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<input type="submit" value="Stuck? Click Here!" ng-click=""> 
<br> 
{{ weather }} 
</div> 
<script type="text/javascript"> 
function HttpController($scope) { 

Var weatherUrl = 
"http://api.openweathermap.org/data/2.5/weather" + 
"2gq=NewYork,NY"; 

$scope.weather = "Loading..."; 


$scope.getNYCWeather = function() { 
$.get (weatherUrl, function(data) { 
$scope.weather = data; 
$scope.$apply (); 
ys 
} 


setTimeout (function() { 
$scope.getNYCWeather (); 
}, 0); 
} 
</script> 


做 个 实验 : 注释 掉 之 前 代码 中 的 $apply 调用 。 此 时 ， 当 HTTP 请 求 返回 时 该 视图 不 会 
被 更 新 。 不 过 ， 如 果 单 击 了 “Stuck? ClickHere!” 按 钮 ， 视 图 将 会 更 新 ， 因 为 ng-click 指令 
调用 了 $apply， 即 使 表达 式 是 空 的 。 


3. $digest 


$digest 是 将 $watch 和 $apply 绑 定 在 一 起 的 魔法 胶水 函数 。 我 们 很 难 找到 一 个 需要 与 
$digest 直接 交互 (而 不 是 通过 $watch 和 $apply) 的 样 例 。 不 过 ， 由 于 该 函数 在 数据 绑 定 核心 
中 的 独特 地 位 ， 它 的 内 部 工作 方式 值得 详细 进行 讨论 。 

从 高 级 别 看 ，$digest 将 计算 作用 域 (以 及 作用 域 的 孩子 ) 中 的 所 有 $watch 表达 式 ， 并 在 
任何 一 个 发 生 改 变 时 调用 监视 器 回调 。 整个 过 程 似乎 很 简单 , 但 是 这 里 有 一 个 小 小 的 难点 : 
监视 器 可 以 改变 作用 域 ， 这 意味 着 接 下 来 可 能 有 其 他 的 监视 器 需要 得 到 这 个 改变 的 通知 。 
因此 ，$digest 实际 上 发 生 在 一 个 循环 中 ， 从 概念 上 看 起 来 就 像 下 面 的 伪 代 码 : 


Var dirty = true; 
var iterations = 0; 
while (dirty && iterations++ < TIMES TO LOOP) { 
dirty = false; 
for (var i = 0; i < scope.watchers.length(); ++i) { 
Var currentValue = scope.watchers[i] .get(); 
if (currentValue != scope.watchers[i].oldValue) { 
dirty = true; 
scope.watchers[i] .callback (currentValue, scope.watchers[i] .oldValue); 
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scope.watchers [1] .oldValue = currentValue; 
外 
} 

重要 的 一 点 是 : TIMES_TO_LOOP 约束 的 存在 是 为 了 阻止 AngularJS 被 困 在 $digest 的 
无 限 循环 中 。 如 果 代码 在 每 次 迭代 之 后 将 dirty 标志 设置 为 tue， 那 么 该 循环 将 永远 运行 下 
去 ， 并 完全 使 浏览 器 冻结 。 现 在 ，AngularJS 将 TIMES_ TO_LOOP( 简 称 TTL) 设 置 为 10。 如 
果 循 环 的 执行 次 数 超过 了 TTL, AngularJS 将 抛 出 一 个 10 $digest iterations reached. Abortingl 
错误 。 这 个 限制 似乎 有 点 小 ， 但 是 在 实践 中 除非 这 是 一 个 无 限 循环 ， 否 则 很 少 会 出 现 3 或 4 
个 $digest 迭代 。 

如 果 发 现 自己 出 于 某 些 原 因 需 要 改变 TIL 值 ， 那 么 AngularJS 允许 使 用 $rootScope 服 
务 和 digestTtl 函数 以 模块 为 基准 改变 这 个 值 。 例 如 ， 为 将 TIL 设置 为 13， 可 在 声明 项 级 
应 用 模块 时 使 用 下 面 的 代码 : 


var app = angular.module('MyApp', [], function($rootSscopeProvider) { 
$rootscopeProvider.digestTt1 (15); 
}); 


4.3.2 性 能 考虑 


与 把 事件 处 理 程序 附加 到 DOM 相 比 ， 你 可 能 认为 AngularJS 使 用 $digest 实现 的 脏 检 
查 (dirty checking) 是 极其 低 效 的 。 实 际 上 ， 脏 检查 通常 足够 高 效 ， 而 且 大 多 数 情况 下 它 在 正 
确 性 和 可 预测 性 上 的 优点 超出 了 性 能 的 影响 。 在 本 节 ， 将 学 习 如 何 最 小 化 性 能 影响 ， 并 保 
证 应 用 让 用 户 看 起 来 非常 快捷 。 

首先 ， 在 深入 学 习 脏 检查 的 内 部 工作 方式 对 性 能 的 影响 之 前 ， 请 记 住 传奇 Stanford 计 
算 机 科学 教授 Donald Knuth 的 名 言 :“ Premature optimization is the root of all evil 
(“Structured Programming with Go To Statements”, ACMjournal, 1974)”。 在 开始 优化 应 用 性 能 
之 前 ， 首 先 应 该 保证 它 能 够 按照 预期 正常 运行 。 

当 我 们 开始 考虑 性 能 时 ， 不 应 该 问 如 何 使 应 用 更 快 ， 而 是 应 该 问 如 何 使 应 用 快 到 它 所 
需 的 程度 。 最 后 ， 如 果 永 远 不 打算 向 用 户 提供 一 个 应 用 的 可 用 版 本 ， 那 么 半成品 原型 的 性 
能 如 何 也 就 不 重要 了 。AngularJS 正 是 用 于 解决 这 个 问题 ， 它 能 将 复杂 的 和 容易 测试 的 、 基 
于 浏览 器 的 客户 端 便捷 地 组 合 在 一 起 。 许 多 开发 者 发 现 将 AngularJS 和 vanilla jQuery 代码 
之 间 的 标准 相 比 较 是 毫 无 意义 的 , 因为 它们 无 法 使 用 jQuery 在 一 个 合理 的 时 间 内 创建 出 现 
有 的 AngularJS 功能 。 

接 下 来 ， 在 考虑 AngularJS 性 能 时 需要 记 住 两 个 重要 的 指导 。 首 先 ，AngularJS 团队 非 
正式 地 建议 在 单个 页 面 中 不 要 使 用 超过 2000 个 监视 器 。 在 设计 应 用 时 要 考虑 2000 个 监视 
器 的 准则 ， 并 记得 实际 上 UI 中 的 所 有 指令 都 将 创建 至 少 一 个 监视 器 。 记 住 $digest 将 检查 
所 有 的 监视 器 ， 如 果 正 在 监视 许多 复杂 的 变量 ， 那 么 该 循环 可 能 会 成 为 瓶颈 。 

第 二 个 需要 记 住 的 重要 指导 是 : AngularJS 性 能 问题 几乎 总 是 因为 以 不 合理 的 方式 使 用 
ngRepeat 所 引起 的 。 你 可 能 猜 到 页 面 创建 的 2000 个 指令 ， 如 果 没 有 某 种 循环 结构 的 话 这 
几乎 是 不 可 能 的 .ngRepeat 指令 是 提供 了 可 以 在 循环 中 创建 指令 的 循环 结构 .因此 ngRepeat 
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指令 可 以 创建 额外 的 监视 器 : 如 果 在 ngRepeat 中 使 用 了 表达 式 , 就 已 经 为 数组 中 的 每 个 元 
素 创 建 了 一 个 额外 的 监视 器 ! 而 且 ，ngRepeat 通常 会 监视 一 个 数组 ， 这 对 于 非常 大 型 的 数 
组 来 说 是 一 个 昂贵 的 操作 。 

出 现 问 题 的 npReat 

将 创建 一 个 简单 的 基准 ， 用 于 演示 大 量 使 用 ngRepeat 时 所 发 生 的 事情 。 下 面 的 代码 将 
在 浏览 器 中 创建 10 000 个 div 元 素 ， 分 别 显示 出 数字 0~9999。jQuery 代码 将 如 下 所 示 ; 


<script src="https:// code.jquery.com/jquery-1.10.2.min.js"> 
</script> 
<script type="application/javascript"> 

$ (document) .ready (function() { 


Var arrayPusher = {}; 


arrayPusher.value = []; 
arrayPusher.get = function() { 
return arrayPusher.value; 
}; 
arrayPusher.set = function(v) { 
var start = Date.now(); 
arrayPusher.value = []; 
$('#container') .empty(); 
for (var i = 0; i < v.length; ++i) { 
arrayPusher.value.push (v[i]); 
$('#container') .append('<div>' + v[i] + '</div>'); 
} 


console.log("Time in MS: " + (Date.now() - start)); 
有 


var arr = []; 

for (var i = 0; i < 10000; ++i) { 
arr.push (i); 

} 


arrayPusher.set (arr); 
]) 
</script> 
实现 相同 功能 的 AngularJS 代码 相当 简单 。 调 用 setTimeout 的 原因 是 为 了 保证 不 会 如 
另 一 个 $digest 循环 中 调用 $digest。AngularJS 将 在 控制 器 初始 化 完成 之 后 执行 $digest。 
setTimeout 调用 将 保证 当 $digest 调用 发 生 时 ， 只 有 脏 监视 器 在 数组 中 。 


Hr 


<script type="application/javascript"> 
function ArrayPushController($scope) { 
$scope.arr = []; 
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$scope.push = function(v) { 
setTimeout (function() { 
Var start = Date.now(); 
$scope.arr = V7 
$scope.s$digest (); 
console.log("Time in MS: " + (Date.now() - start)); 
}, 500); 
上 3 
$scope.newArr = []; 
for (var i = 0; i < 10000; ++i) { 
$scope.newArr.push (i); 
} 
} 
</script> 
<div ng-controller="ArrayPushController" ng-init="push (newArr)"> 
<div ng-repeat="x in arr"> 
{{ x }} 
</div> 
</div> 


当 运 行 之 前 的 代码 时 ， 控 制 台 将 告诉 你 AngularJS 代码 相当 缓慢 。 在 Google Chrome 
中 ， 可 以 看 到 AngularJS 代码 可 能 需要 花费 大 约 1500 毫秒 ， 而 jQuery 代码 花费 了 大 约 500 
毫秒 。 记 住 ， 这 些 数 字 来 自 于 N=1 的 实验 ， 而 且 这 里 只 是 使 用 它们 演示 相对 的 性 能 。 

首先 ， 请 考虑 AngularJS 样 例 中 有 多 少 作用 域 和 多 少 监视 器 。 你 可 能 认为 唯一 的 监视 
器 是 由 ngRepeat 在 arr 的 值 上 创建 的 。 不 过 ， 页 面 中 实际 上 有 10 000 个 其 他 的 监视 器 。 
ngRepeat 指令 为 数组 中 的 每 个 元 素 创 建 了 一 个 新 的 作用 域 ， 所 以 之 前 ngController 指令 定 
义 的 作用 域 有 一 个 监视 器 和 10 000 个 子 作用 域 ， 而 每 个 作用 域 都 有 自己 的 监视 器 。 

这 在 AngularJS 中 是 如 何 执行 的 呢 ? $digest 循环 将 执行 两 次 。 第 一 个 欠 代 最 昂贵 ， 医 
为 此 时 AngularJS 将 创建 10 000 个 作用 域 ， 然 后 将 基于 x 值 的 监视 器 附加 到 它们 中 的 每 一 
个 。 第 二 次 迭代 的 发 生 是 因为 上 一 次 迭代 在 每 个 子 作 用 域 中 都 改变 了 x 的 值 。 如 果 对 这 两 
个 迭代 进行 分 析 的 话 ， 第 一 个 循环 花费 了 大 概 1500 毫秒 中 的 1300 毫秒 ， 第 二 次 循环 使 用 
了 200 毫秒 。 

如 何 才能 改善 性 能 呢 ? 一 种 加 速 AngluarJS 对 大 型 列表 处 理 的 常见 模式 是 : 移 除 子 作 
用 域 上 的 10 000 个 监视 器 。 从 高 级 别 上 看 ，ngBind 将 把 一 个 监视 器 赋 给 {f}} 的 内 容 ， 并 告 
诉 浏览 器 在 每 次 监视 器 触发 时 改变 DOM 元 素 的 内 容 。 因 此 ， 每 次 arr 的 内 容 改变 时 ， 
AngularJS 需要 执行 两 次 $digest 迭代 。 它 还 需要 创建 和 销毁 这 些 只 有 一 个 监视 器 的 作用 域 。 

通过 避免 创建 这 些 监视 器 可 以 节省 多 少 开 销 呢 ? 对 这 个 问题 更 加 全 面 的 解答 要 求 深 入 
了 解 指令 是 如 何 工作 的 ; 第 5 章 将 讲解 这 个 问题 的 答案 。 与 此 同时 ， 可 以 做 一 个 简单 的 实 
验 ， 在 之 前 的 代码 中 使 用 一 个 静态 值 蔡 换 {{x }} 表 达 式 ， 例 如 : 


<div ng-controller="ArrayPushController" ng-init="push (newArr)"> 
<div ng-repeat="x in arr"> 
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1 
</div> 
</div> 

这 个 结果 非常 重要 。AngularJS 执行 之 前 的 代码 使 用 了 大 约 800 毫秒 , 并 且 只 执行 了 一 
个 $digest 循环 ! 

一 次 性 绑 定 方式 看 起 来 似乎 是 双向 数据 绑 定 功能 的 一 个 重大 障碍 。 不 过 ， 这 种 方式 在 
实际 中 的 效果 也 很 好 。 如 果 某 个 应 用 正在 为 一 个 非常 长 的 列表 使 用 ngRepeat， 那 么 这 部 分 
应 用 可 以 考虑 给 予 用 户 一 个 数据 项 列表 ， 和 单 击 其 中 某 个 数据 项 查看 更 多 细节 的 能 力 。 这 
种 模式 通常 被 引用 为 主 表明 细 (master-detaiD) 设 计 模式 一 一 在 一 个 数据 项 主 列表 中 ， 单 击 其 
中 某 个 数据 项 将 产生 一 个 细节 视图 。 

主 表 明细 (master-detailD) 模 式 通常 会 在 主 列表 中 显示 出 静态 信息 。 假 设 应 用 要 显示 一 个 
将 要 发 生 的 事件 列 的 表 : 我 们 不 希望 浏览 事件 的 用 户 能 够 改变 指定 事件 的 标题 ! 如 本 例 所 
示 ， 在 事件 标题 上 设置 监视 器 是 一 个 浪费 ， 因 为 用 户 应 该 不 能 修改 该 标题 。 


4.3.3 ”过 滤器 和 数据 绑 定 


过 滤器 是 被 低估 的 AngularJS 功能 ， 而 且 它 与 数据 绑 定 和 表达 式 有 着 紧密 的 联系 。 过 
滤器 是 可 以 串联 的 函数 ， 能 够 从 任何 AngularJS 表达 式 中 访问 它 。 通 常 它们 在 泻 染 数据 之 
前 ， 被 用 于 最 后 一 秒 的 数据 后 期 处 理 。 过 滤器 将 以 单 向 方式 绑 定 在 数据 绑 定 上 ， 所 以 可 以 
在 例如 ngBind 和 ngClick 这 样 的 指令 (不 能 使 用 ngModel 这 样 的 指令 ) 中 使 用 过 滤器 。 请 回 
顾 一 下 本 章 的 引言 部 分 ， 指 令 被 分 为 了 三 类 ; 只 有 前 两 类 指令 可 以 使 用 过 滤器 。 要 记 住 重 
要 的 一 点 ， 过 滤器 不 会 改变 JavaScript 变量 底层 的 值 。 

使 用 | 符号 调用 过 滤器 , 额外 的 参数 将 被 添加 到 过 滤器 名 称 之 后 , 并 使 用 :符号 进行 分 隔 。 
过 滤器 的 一 个 简单 样 例 就 是 内 置 的 limitTo 过 滤器 , 它 将 接受 一 个 字符 串 , 并 返回 一 个 被 限 
制 为 拥有 特定 数量 字符 的 字符 串 : 

{{ '123456789' | limitTo:9 }} => "123456789" 

{{ '123456789' | limitTo:4 }} => "1234" 

过 滤器 有 三 个 常见 的 用 例 。 接 下 来 将 通过 样 例 讲解 每 一 个 用 例 。 每 个 用 例 还 演示 了 人 
们 同时 使 用 数据 绑 定 和 过 滤器 时 常见 的 错误 ， 所 以 希望 在 完成 了 本 节 的 学 习 之 后 ， 你 能 真 
正 地 成 为 一 个 数据 绑 定 专家 。 


1. 用 例 1: 将 对 象 转换 成 字符 串 的 规则 


在 构建 UI 时 ， 无 可 避免 地 需要 将 对 象 转换 成 字符 串 。 例 如 ， 现 在 有 一 个 含有 姓 和 名 
的 用 户 对 象 。 我 们 可 能 需要 使 用 下 面 的 格式 显示 用 户 名 : 


{{ user.name.first }} {{ user.name.last }} 


作为 一 次 性 的 解决 方案 ， 这 种 方式 工作 地 很 好 。 不 过 ， 当 这 种 模式 开始 出 现在 多 个 位 
置 时 ， 我 们 就 开始 违反 关键 的 编程 实践 了 : 不 要 重复 自己 ， 这 通常 简写 为 DRY。 当 代码 中 
充满 这 些 语句 时 ， 如 果 稍 后 我 们 决定 真正 需要 只 是 姓 的 最 后 一 个 字母 ， 那 么 此 时 会 发 生 什 
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么 事情 呢 ? 或 者 如 果 我 们 决定 自己 需要 将 名 字 的 总 长 度 限 制 为 40 个 字符 , 该 怎么 办 呢 ? 寻 
找 并 蔡 换 的 方式 可 以 工作 ， 但 这 是 错误 的 方式 ， 因 为 它们 是 混乱 并 且 易 于 出 错 的 。 

此 外 ， 还 可 以 将 函数 附加 到 username 对 象 上 ( 称 为 user.name.toString())， 该 对 象 负责 
将 对 象 转换 成 字符 串 。 之 前 使 用 面向 对 象 语言 (例如 Java 或 者 C++) 的 读者 可 能 认为 这 是 
JavaScript 中 的 正确 方式 。 尽 管 这 种 方式 在 JavaScript 可 以 实现 ， 但 是 在 使 用 AngularJS 的 
Web 开发 环境 中 通常 是 不 合理 的 。 因 为 JavaScript 不 是 强 类 型 语言 ， 严 格 面向 对 象 的 方式 
带 来 的 类 型 检查 优点 在 JavaScript 中 并 未 实现 。 而 且 ， 因 为 JSON API 通常 是 深层 嵌 套 的 ， 
尝试 使 用 JavaScript 进行 严格 面向 对 象 编程 (或 者 简称 OOP) 将 生成 许多 重复 的 代码 ， 如 下 
所 示 : 


var group = new Group (jsonData.group); 

for (var i = 0; i < group.members.length; ++i) { 
group.members[i] = new User(group.members[i]); 

} 


这 样 的 代码 将 无 法 使 用 来 自 JavaScript 函数 功能 的 简洁 表达 式 。 尽 管 这 种 方式 可 以 工 
作 ， 但 是 它 并 不 是 适用 于 JavaScript 语言 功能 集 的 最 佳 方式 。 

过 滤器 提供 了 一 种 把 这 个 字符 串 转换 功能 公开 给 AngularJS 表 达 式 的 方式 , 而 且 这 种 方 
式 保留 了 AngularJS 出 名 的 单元 测试 友好 结构 。 下 面 是 一 个 处 理 用 户 名 用 例 的 简单 过 滤器 : 


angular. 
module ('filters'). 
filter('displayName', function() { 
return function(name) { 
return name.first + " " + name.last; 


} 
DD); 
毫 不 奇怪 ， 过 滤器 将 使 用 指定 的 名 称 附加 到 AngularJS 模块 中 ， 然 后 我 们 就 可 以 使 用 
该 名 称 从 表达 式 中 访问 过 滤器 。 例 如 ， 为 了 使 用 该 过 滤器 ， 需 要 使 用 下 面 的 代码 : 


{{ user.name | displayName }} 


现在 该 表达 式 的 监视 器 知道 在 计算 表达 式 时 ， 把 user.name 的 值 传 入 到 之 前 的 函数 中 。 
注意 ， 过 滤器 是 使 用 AngularJS 中 常见 的 “返回 函数 的 函数 ”模式 定义 的 。 被 返回 的 函数 
是 一 个 完成 实际 工作 的 函数 。 被 返回 的 函数 将 收 到 一 个 管道 值 作 为 它 的 第 一 个 参数 ， 以 及 
由 :分 隔 的 所 有 参数 作为 接 下 来 的 参数 。 外 部 函数 是 一 个 工厂 ， 可 以 绑 定 到 AngularJS 依赖 
注入 中 。 尽 管 过 滤器 通常 应 该 是 没有 依赖 的 轻 量 级 函数 ， 但 是 过 滤器 可 以 访问 相关 模块 中 
的 任意 服务 。 例 如 ， 过 滤器 可 以 使 用 $http 服务 ， 如 下 面 的 样 例 所 示 。 不 过 ， 在 过 滤器 中 使 
用 $http 服务 通常 是 一 个 糟糕 的 做 法 , 因为 每 次 表达 式 执行 时 代码 都 将 发 送 一 个 HTTP 请 求 : 

angular. 


module('filters'). 
filter('displayName', function() { 


return function(name) { 
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return name.first + " " + name.last; 
} 
1D); 

过 滤器 另 一 个 灵活 的 特性 是 它们 可 以 通过 管道 的 方式 串联 在 一 起 .熟悉 bash shell 的 读 
者 会 将 | 符号 识别 为 将 一 个 程序 的 输出 导入 到 另 一 个 程序 的 工具 。AngularJS 将 为 过 滤器 使 
用 | 符号 ， 因 为 过 滤器 可 以 通过 相似 的 方式 串联 在 一 起 。 例 如 ， 出 于 设计 考虑 ， 我 们 可 能 
望 在 UI 上 的 特定 部 分 将 用 户 名 限制 为 40 个 字符 。 可 以 通过 将 之 前 displayName 过 滤器 的 
输出 导入 到 AngularJS 的 内 置 limitTo 过 滤器 中 的 方式 实现 ， 如 下 所 示 : 


{{ user.name | displayName | limitTo:40 }} 


但 想象 一 下 ， 如 果 我 们 希望 把 所 有 displayName 的 输出 都 限制 为 最 多 40 个 字符 ,该 怎 
么 办 呢 ? 如 果 字 符 串 过 长 ， 那 么 可 以 使 displayName 过 滤器 返回 一 个 子 字符 串 ， 但 是 还 有 
另 一 种 方式 ， 它 演示 了 过 滤器 的 另 一 种 常见 用 例 。 与 当前 模块 关联 的 过 滤器 可 以 通过 依赖 
注入 作为 $filter 服务 访问 。 通 过 将 该 服务 注入 到 displayName 过 滤器 中 ， 可 以 重用 limitTo 
过 滤器 ， 从 而 使 代码 比 Sahara Desert 更 加 符合 DRY 原则 : 


angular. 
module('filters') . 
filter('displayName', function($filter) { 
return function(name) { 
return $filter('limitTo') (name.first + " " + name.last, 40); 
} 
DD); 


AngularJS 内 置 过 滤器 中 符合 该 用 例 的 一 个 好 例子 是 date 过 滤器 。date 过 滤器 提供 了 
一 些 复杂 的 功能 ， 用 于 将 日 期 或 者 与 日 期 类 似 的 对 象 转换 成 字符 串 。 使 用 过 滤器 (而 不 是 创 
建 一 个 新 的 对 象 ) 的 男 一 个 优点 是 : 可 为 date 过 滤器 传 入 一 个 日 期 对 象 、 适 当 的 格式 化 字符 
串 或 者 一 个 数字 时 间 戳 ，AngularJS 将 会 正确 地 对 它 进 行 处 理 。 
过 滤器 date 的 第 二 个 参数 指定 了 输出 日 期 所 使 用 的 格式 。 从 概念 上 讲 ，date 过 滤器 类 
似 于 C 和 C++ 中 的 strptime 函数 ， 但 是 它 使 用 了 完全 不 同 的 语法 。 下 表 4-2 演示 了 date 过 
滤器 最 常 使 用 的 格式 元 素 。 


表 4-2 date 过 滤器 最 常用 的 格式 元 素 


元 素 输出 样 例 
yyyy 4 位 数字 的 年 份 {{"2009-02-03" | date:"yyyy"}} => "2009" 
yy 年 份 的 后 两 位 ， 被 填充 {{"2009-02-03" | date:"yy"}} => "09" 
MMMM | 完整 的 月 份 名 称 ， 从 January 到 | {{"2009-02-03" | date:"MMMM yy"}} => "February 09" 
December 
MMM 月 份 名 称 简写 ， 从 Jan 到 Dec {{"2009-02-03" | date:"MMM yyyy"}} => "Feb 2009" 
MM 填充 的 数字 月 份 ， 从 01 到 12 {{"2009-02-03" | date:"MM/yyyy"}} => "02/2009" 
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( 续 表 ) 
元 素 输出 样 例 

M 未 填充 的 数字 月 份 ， 从 1 到 12 {{"2009-02-03" | date:"M/yyyy"}} => "2/2009" 

dd 填充 的 月 份 中 的 日 期 从 01 到 31 | {{"2009-02-03"| date:"MMM dd"}} => "Feb 03" 

d 未 填充 的 月 份 中 的 日 期 ， 从 1 到 31 | {{"2009-02-03" | date:"MMM d"}} => "Feb 3" 

EEEE 星期 几 ， 从 Sunday 到 Saturday {{"2009-02-03" | date:"EEEE, MMM d"}} => "Tuesday, 
Feb 3" 

EEE 星期 几 的 简写 ， 从 Sun 到 Sat {{"2009-02-03" | date:"EEE, MMM d"}} => "Tue, Feb 3" 

HH 一 天 中 的 小 时 ,已 填充 ， 从 00 到 23 | {{"2009-02-03T08:00:00" | date:"HH"}} => "08" 

H 一 天 中 的 小 时 ， 未 填充 ， 从 0 到 23 | {{"2009-02-03T08:00:00" | date:"H"}} => "8" 

hh 一 天 中 的 小 时 ， 上 午 /下 午 , 已 填充 ，| {{"2009-02-03T14:00:00" | date:"hh"}} => "02" 

从 01 到 12 
h 一 天 中 的 小 时 ， 上午 /下 午 , 未 填充 ，| {{"2009-02-03T14:00:00" | date:"h"}} => "2" 
从 1 到 12 

mm 分 钟 ， 已 填充 ， 从 00 到 59 {{"2009-02-03T14:00:00" | date:"h:mm"}} => "2:00" 

m 分 钟 ， 未 填充 ， 从 0 到 59 {{"2009-02-03T14:00:00" | date:"h:m"}} => "2:0" 

SS 秒 ， 已 填充 ， 从 00 到 59 {{"2009-02-03T14:00:59" | date:"h:mm:ss"}} => 
"2:00:59" 

S 秒 ， 未 填充 ， 从 0 到 59 {{"2009-02-03T14:00:09" | date:"m:s"}} => "0:9" 

a 上 年 /下 午 {{"2009-02-03T14:00:00" | date:"h:imm a"}} => "2:00 
pm" 

除了 为 自 定义 日 期 格式 提供 大 量 的 选项 ，date 过 滤器 还 为 常见 的 日 期 格式 提供 了 一 些 
非常 方便 的 简洁 方式 。 表 4-3 列 出 一 些 最 常见 的 日 期 格式 。 
表 4-3 一 些 最 常见 的 日 期 格式 
简写 对 等 的 格式 样 例 
medium MMM d, yh:mm:ssa | {{"2009-02-03T14:00:09" | date:"medium"}} => "Feb 3, 2009 2:00:09 
pm 
short M/d/yy himm a {{"2009-02-03T14:00:09" | date:"short"}} => "2/3/09 2:00 pm" 
fullDate EEEE, {{"2009-02-03T14:00:09" | date:"fullDate"}} => "Tuesday, February 3, 
MMMM dy 2009" 
mediumTime | himm:ss a {{"2009-02-03T14:00:09" | date:"mediumTime"}} => "2:00:09 pm" 
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陷阱 
AngularJS 的 ngBind 指 令 (是 常用 {f} 简 写 的 基础 ) 将 转 义 表达 式 输 出 中 的 HTML。 这 是 
对 跨 站 脚本 攻击 最 基本 的 防御 。 这 对 于 我 们 意味 着 什么 呢 ? 使 用 过 滤器 格式 化 字符 串 的 过 
程 就 是 文本 链接 化 的 过 程 。 例 如 使 用 HTML 的 a 标记 将 文本 中 的 所 有 http://www.angularjs.com 
实例 转换 成 链接 。 在 运行 下 面 的 代码 时 ， 我 们 无 法 看 到 所 需要 的 链接 ， 而 是 得 到 了 HTML 
标记 转 义 后 的 文本 。 
<div> 
<hl>Using ngBind</h1> 
<span ng-bind="'Go to http://www.google.com to search' | linkify"> 


</span> 
</div> 


<script type="text/javascript"> 
module.filter('linkify', function() { 
return function(str) { 
return str.replace(/(http:\/\/\s+)/ig, function(match) { 
return "<a href='" + match + "'>" + match + "</a>"; 
Ds 
}; 
1); 
</script> 


解决 这 个 问题 的 方式 非常 简单 。 还 有 一 个 称 为 ngBindHtml 的 指令 , 它 的 行为 与 ngBind 
几乎 一 致 ， 但 它 不 会 对 安全 合理 的 HTML 标记 进行 转 义 。 换 句 话说 ，ngBindHtml 不 会 转 
义 诸 如 a 或 者 div 的 标记 ， 但 是 它 会 转 义 存在 潜在 危险 的 标记 ， 例 如 script 和 style。 在 版 
本 1.2 之 前 ， 较 早 的、 稳定 版 本 的 AngularJS 中 不 含 ngBindHtml。 不 过 ， 这 些 版 本 有 一 个 
ngBindHtmlUnsafe 指令 ， 它 不 做 任何 的 转 义 工作 。 我 们 不 应 该 使 用 ngBindHtmlUnsafe， 除 
非 确信 恶意 用 户 无 法 将 script 标记 注入 ngBindHtmlUnsafe 表达 式 中 。 


2. 用 例 2: 全 局 函数 的 封装 器 


记 住 ， 被 附加 到 全 局 window 对 象 中 的 函数 (例如 encodeURIComponenb 默 认 无 法 从 
AngularJS 表达 式 中 访问 。 过 滤器 是 从 表达 式 中 访问 此 类 函数 的 首选 解决 方案 。 例如， 下 面 
是 一 个 封装 了 encodeURIComponent 函数 的 过 滤器 。 

filter('encodeUri', function() { 

return function(x) { 
return encodeURIComponent (x); 
1; 

]) 

恭喜 ! 现在 可 在 模块 中 使 用 encodeURIComponent 表达 式 了 ! 关键 的 区 别 在 于 : 如 与 
控制 器 一 样 ， 过 滤器 函数 代码 将 直接 运行 在 浏览 器 中 ， 而 不 是 在 内 部 根据 作用 域 直接 进行 
计算 。 这 个 新 指令 与 ngHref 指令 一 起 使 用 是 非常 有 用 的 。 假 设 我 们 希望 为 目录 中 的 产品 使 
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用 一 个 ngRepeat 指令 ， 并 包含 每 个 产品 的 链接 。 那 么 该 代码 将 如 下 所 示 : 


<div ng-repeat="product in products"> 
<a ng-href="/product/{{product.name | encodeUri}}"> 
{{ product.name }} 
</a> 
</div> 


我 们 还 希望 将 一 些 其 他 window 函 数 附 加 到 过 滤器 中 ， 例 如 isNan 和 decodeURIComponent。 
幸亏 ， 在 表达 式 中 希望 使 用 的 全 局 函数 并 不 多 ， 所 以 只 需要 通过 这 种 方式 创建 一 些 过 滤器 
即 可 。 


陷阱 
AngularJS 新 手 经 常 遇 到 的 另 一 个 问题 是 尝试 在 表达 式 中 使 用 三 元 操作 符 。 遗 憾 的 是 ， 
这 样 的 表达 式 无 法 工作 ， 因 为 表达 式 解 析 器 不 理解 三 元 操作 符 : 


{{ request.done ? "Done" : "In Progress" }} 


有 几 种 方式 可 以 蔡 代 这 个 有 缺陷 的 方式 。 可 以 使 用 ngIf 指 令 作 为 近似 的 选项 。 不 过 ， 
要 注意 没有 对 应 的 ngElse 指令 ， 所 以 这 种 方式 不 像 三 元 运算 符 那 样 简洁 。 如 果 使 用 的 是 旧 
版 AngularJS, 请 记 住 ngIf 是 在 版 本 1.1.5 中 引入 的 。 在 本 例 中 , 如 果 使 用 ngShow 替代 ngIf 
也 可 以 正常 工作 ， 而 ngShow 从 开始 就 一 直 存 在 于 AngularJS 中 : 


<div ng-if="request.done"> 
Done 

</div> 

<div ng-if="!request.done"> 
In Progress 

</div> 


不 过 可 以 使 用 过 滤器 以 更 简洁 的 方式 实现 。 再 次 ， 请 记 住 过 滤器 函数 代码 将 在 浏览 器 
中 执行 ， 而 不 是 由 AngularJS 计算 。 如 果 发 现 自己 需要 使 用 JavaScript 中 可 用 、 但 在 表达 式 
中 不 可 用 的 功能 ， 那 么 通常 过 滤器 就 是 正确 的 选择 。 你 可 能 已 经 猜 到 了 ， 可 以 编写 一 个 封 
装 了 三 元 操作 符 的 过 滤器 ， 如 之 前 为 封装 encodeURIComponent 函数 所 写 的 过 滤器 一 样 : 


<div ng-controller="RequestsController"> 
<div ng-repeat="request in requests"> 
{{ request.done | conditional:'Done':'In Progress' }} 
</div> 
</div> 


<script type="text/javascript"> 
function RequestsController($scope) { 
$scope.requests = []; 
for (var i = 0; i < 50; ++i) { 
$scope.requests.push({ done : (i %$ 3 == 0) }); 
} 
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module.filter('conditional', function() { 
return function(b, t, f) { 
returnb ?ts 王 7 
}; 
]) 
</script> 


在 运行 之 前 的 代码 时 ， 如 预期 一 样 ， 浏 览 器 将 每 三 行 显示 一 个 Done, 在 其 余 行 中 显示 
In Progress。 另 外 ， 还 可 以 在 传 给 指令 的 表达 式 中 使 用 这 个 conditional 过 滤器 。 过 滤器 
conditional 与 ngHref 指令 结合 使 用 时 特别 有 用 。 例 如 ， 可 以 修改 之 前 的 HIML， 创 建 一 个 
条 件 链接 : 


<div ng-controller="RequestsController"> 
<div ng-repeat="request in requests"> 
<a ng-href="{{request.done | conditional:'/history':'/request'}}"> 
{{ request.done | conditional:'Done':'In Progress' }} 
</a> 
</div> 
</div> 


<script type="text/javascript"> 
function RequestsController($scope) { 
$scope.requests = []; 
for (var i = 0; i < 50; ++i) { 
$scope.requests.push({ done : (i % 3 == 0) }); 
} 
} 


module.filter('conditional', function() { 
return function(b, t, f£) { 
return b 3 Et :Fs 
] 7 
]) 7 
</script> 


之 前 的 代码 现在 每 三 行将 输出 一 个 /history 的 链接 ， 否 则 输出 /request 的 链接 。 当 然 ， 


这 些 URL 链接 到 的 都 是 不 存在 的 页 面 ， 但 是 无 论 如 何 使 用 conditional 过 滤器 ， 生 成 动态 
URL 的 方式 都 是 非常 清晰 的 。 


3. 用 例 3: 操作 数组 


顾名思义 ， 过 滤器 可 用 于 过 滤 、 排 序 和 操作 数组 。AngularJS 有 两 个 专门 用 于 操作 数组 
的 过 滤器 : ( 令 人 困惑 的 ) 名 为 filter 的 过 滤器 将 搜索 数组 ， 名 为 orderBy 的 过 滤器 将 对 数组 
进行 排序 。limitTo 过 滤器 除了 作用 于 字符 串 ， 也 可 以 作用 于 数组 ， 它 将 操作 数组 以 符合 
个 最 大 长 度 。 过 滤器 是 可 以 串联 的 ， 并 且 可 以 在 ngRepeat 指令 中 使 用 ， 所 以 可 以 同时 使 用 
这 三 个 过 滤器 。 
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假设 现在 有 一 个 请 求 的 列表 ， 每 个 请 求 有 三 个 字段 : 完成 标志 、 名 字 和 请 求 在 完成 之 
前 所 花费 的 时 间 。 如 果 希 望 显示 10 个 尚未 完成 并 且 花 费时 间 最 长 的 请 求 , 那么 可 以 结合 
用 filter、orderBy、limitTo 过 滤器 和 ngRepeat 指令 ， 如 下 所 示 : 


<div ng-controller="RequestsController"> 
<div ng-repeat="request in requests | 
filter:{'done':false} | orderBy:'-time' | 
limitTo:10"> 
{{ request.name }} 
</div> 
</div> 


<script type="text/javascript"> 
function RequestsController($scope) { 
$scope.requests = []; 
for (var i = 0; i < 50; ++i) { 
$scope.requests.push({ 
done : (i % 3 == 0)， 
name : "" + i, 
time : (i - 25) * (i - 25) 
1); 
} 
} 
</script> 


在 之 前 的 代码 中 ，filter 过 滤器 的 第 二 个 参数 指定 了 过 滤器 只 应 该 返回 未 完成 的 请 求 。 
orderBy 过 滤器 的 第 二 个 参数 -time 指 定 了 请 求 应 该 按照 时 间 以 降序 进行 排序 一 一 也 就 是 说 
time 值 最 大 的 排 在 第 一 位 。 最后, limitTo 过 滤器 的 参数 将 告诉 AngularJS 最 多 显示 10 个 结果 。 

使 用 过 滤器 可 以 解析 的 另 一 个 有 趣 的 、 与 数组 相关 的 问题 是 部 分 硬 编码 数组 的 顺序 。 
可 能 我 们 正在 编写 购物 车 应 用 的 结账 部 分 。 结 账 页 面 为 用 户 提供 了 一 个 下 拉 列 表 用 于 选择 
希望 将 购买 的 货物 运送 到 的 国家 。 因 为 大 多 数 客户 都 在 美国 ， 所 以 我 们 希望 将 美国 列 为 第 
一 个 选项 ， 但 是 其 他 国家 将 按照 字母 顺序 进行 排列 。 因 此 将 编写 一 个 把 美国 排 在 列表 第 一 
位 的 过 滤器 。 通 常 这 并 不 是 一 个 特别 困难 的 任务 ， 但 是 过 滤器 提供 了 一 个 框架 ， 可 以 使 用 
优雅 的 和 易于 重用 的 方式 编写 该 代码 ， 从 而 使 你 不 会 被 各 种 小 问题 所 淹没 。 

<div ng-controller="CountriesController"> 
<select ng-model="country" 
ng-options="country.name for country in countries | 
orderBy:'name' | hardcodeFirst:'name':'USA'"> 
</select> 
<br> 


{{ country.name }} 
</div> 


<script type="text/javascript"> 
function CountriesController($scope) { 
$scope.countries = [ 


第 4 章 数据 绑 定 


name 


} 


name : 
name : 
name : 
name : 
name : 


"Germany™" }, 
"Australia"™ }, 
"Norway™" }, 
"USA" }, 
"Sweden™ }, 
mstriaw 


module.filter('hardcodeFirst', function() { 
return functionl(arr, field, val) { 
var first = null; 
for (var i = 0; i < arr.length; ++i) { 


和 


} 


(arr[il] [field] == val) { 
first = i; 


break; 


if (firat) { 
return arr; 


} 


var firstEl = arr[first]; 
arr.splice (first, 0); 
arr.unshift (firstEl); 


return arr; 


}; 
1); 
</script> 


hardcodeFirst 有 点 复杂 ， 但 结果 足够 简单 : 在 数组 中 找到 field 值 等 于 val 的 第 一 个 元 


素 ， 从 数组 中 移 除 该 元 素 ， 并 将 它 插入 到 数组 开头 。 可 以 看 到 这 个 过 滤器 是 非常 合理 的 ， 
而 且 过 滤器 的 框架 提供 了 一 种 优雅 的 方式 ， 可 以 在 所 需要 的 位 置 重 用 该 代码 。 


陷阱 


记 住 ， 只 要 表达 式 每 次 计算 的 结果 不 同 (按照 angular.equals 函数 所 定义 的 )，$digest 循 
环 将 持续 运行 下 去 。 编 写 一 个 触发 无 限 $digest 循环 的 简单 表达 式 并 不 常见 。 不 过 ， 通 过 
ngRepeat 指令 ， 过 滤器 可 能 很 容易 就 搬 起 石头 磺 自 己 的 脚 。 例 如 ， 在 之 前 的 样 例 中 ， 我 们 
有 一 个 国家 列表 ， 使 用 一 个 含有 普通 字符 串 的 数组 进行 表示 。 为 将 该 字符 串 数组 转换 成 一 


个 含有 name 特性 的 对 象 数组 ， 你 可 能 认为 可 以 使 用 过 滤器 : 


<div ng-controller="CountriesController"> 
<div ng-repeat="country in countries | lift:'name'"> 
{{ country.name }} 


</div> 
</div> 
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<script type="text/javascript"> 
function CountriesController($scope) { 
$scope.countries = [ 

"Germany", 

"Australia", 

"Norway", 

"USA", 

"Sweden", 

"Austria" 


} 


module.filter('lift', function() { 
return function (arr，field) { 


var ret = []; 

for (var i = 0; i < arr.length; ++i) { 
Var newEl = {}; 
newEl [field] = arr[il]; 


ret .push (newEl); 
} 


return ret; 
} 
1); 
</script> 

但 如 果 我 们 运行 该 代码 , 控制 台 输 出 中 将 会 显示 出 无 限 $digest 循环 ! 为 什么 ? 脐 脏 (一 
语 双 关 ) 的 秘密 在 于 AngularJS 并 不 总 是 使 用 angular.equals 检查 相等 性 。 作用 域 中 有 一 个 备 
用 的 $watchCollection 函数 ， 它 只 做 浅 层 的 相等 性 检查 。 这 就 是 说 ， 如 果 两 个 数组 的 大 小 不 
同 或 者 数组 中 的 某 个 元 素 不 恒 等 于 另 一 个 数组 中 的 元 素 (使 用 一 = 操作 符 ), $watchCollection 
函数 将 通过 这 种 方式 判断 出 两 个 数组 是 不 相等 的 。 注 意 在 JavaScript 中 ， 只 有 当 两 个 对 象 
含有 相同 的 内 存 地 址 时 = 一 操作 符 才 会 返回 tue。 实 际 中 我 们 很 少 使 用 SwatchCollection 函 
数 ， 所 以 在 AngularJS 内 部 之 外 的 地 方 不 太 可 能 看 到 它 。 
不 过 , 为 了 改善 性 能 (有 点 可 疑 )，ngRepeat 将 使 用 SwatchCollection 函数 监视 in 右 侧 的 
值 。 因 为 li 过 滤器 每 次 都 创建 新 对 象 的 一 个 数组 ， 所 以 SwatchCollection 认为 它 每 次 得 到 
的 都 是 一 个 不 同 的 数组 ! 尝试 使 用 这 染 过 滤 结 果 的 简单 字符 串 蔡 换 ngRepeat 块 ， 例 如 
{{ countries | lift:name' }}。 我 们 不 再 会 看 到 无 限 $digest 循环 ， 因 为 表达 式 的 脏 检查 将 使 用 
angularequalsCngRepeat 除外 )。 

S$watchCollection 和 $watch 之 间 的 区 别 是 一 个 非常 微妙 的 陷阱 ,避免 这 个 问题 的 最 佳 方 
式 就 是 避免 在 过 滤器 中 创建 新 的 对 象 , 尤其 是 如 果 打算 使 用 过 滤器 操作 数组 (使 用 ngRepeat) 
的 话 。 如 果 发 现 自己 需要 执行 某 些 类 似 于 lift 过 滤器 完成 的 操作 ， 就 不 应 该 依赖 于 过 滤器 。 
而 是 应 该 在 自己 的 控制 器 代码 或 者 另 一 个 服务 中 执行 该 操作 。 
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4.4 小 结 


在 本 章 ， 我 们 学 习 了 “如 何 ” 和 “为 什么 ”使 用 数据 绑 定 。 还 浏览 了 数据 绑 定 的 内 部 
工作 方式 和 AngularJS $digest 循环 的 实现 细节 ， 包 括 如 何 优化 该 循环 的 最 佳 实践 。 关 于 
$digest 循环 的 内 部 实现 ， 我 们 看 见 了 几 个 常见 的 陷阱 ， 以 及 如 何 避 免 它 们 。 现 在 ， 如 果 遇 
到 了 10 $digest iterations reached.Aborting! 错 误 消 息 , 那么 应 该 知道 发 生 了 什么 问题 。 另 外 ， 
我 们 还 学 习 了 如 何 使 用 AngularJS 数据 绑 定 在 前 端 JavaScript 和 ULUX 决定 之 间 实 现 更 加 
清晰 的 分 离 ， 从 而 使 团队 合作 更 加 高 效 。 
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本 章 内 容 : 

指令 的 定义 和 强大 之 处 
三 类 基本 指令 
指令 对 象 和 指令 组 合 
使 用 指令 操作 作用 域 
使 用 内 嵌 和 编译 


本 章 的 样 例 代码 下 载 : 
可 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文件 。 


5.1 指令 


你 可 能 已 经 注意 到 了 单词 “指令 ”被 用 于 描述 AngularJS 特有 的 HIML 特性 ， 例 如 
ngClick 和 ngBind。 指 令 是 数据 绑 定 正 常 工作 不 可 或 缺 的 一 部 分 : 作用 域 多 许 使 用 Swatch 
监视 变量 的 改变 , 并 使 用 $apply 触发 digest 循环 , 但 是 如 何 使 用 这 些 函 数 更 新 用 户 界面 (UD 
呢 ? 指令 正 是 为 了 这 个 目的 而 提出 的 一 个 抽象 。 

之 前 我 们 已 经 看 到 了 内 置 的 指令 ， 例 如 ngClick， 但 这 只 是 冰山 一 角 。 在 本 章 ， 我 们 不 
止 要 学 习 内 置 指令 的 内 部 工作 机 制 ， 还 要 学 习 如 何 编写 复杂 的 自 定 义 指 令 。 


5.1.1 了 解 指 令 


从 根本 上 讲 ， 指 令 是 定义 UI 如 何 与 数据 绑 定 进行 交互 的 规则 。 换 名 话说， 指令 定义 
了 相关 元 素 如 何 与 对 应 的 作用 域 进 行 交 互 。 将 通过 编写 一 个 简单 的 指令 进行 实验 : 内 置 
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ng-Click 指令 的 自 定义 实现 。 从 根本 上 讲 ，ngClick 指令 需要 在 元 素 被 单 击 时 ， 针 对 相关 元 
素 的 作用 域 执 行 DOM 特性 中 提供 的 JavaScript 代码 。 尽 管 这 可 有 点 麻烦 ， 但 是 AngularJS 
将 为 你 追踪 元 素 所 属 的 作用 域 ， 而 且 针对 作用 域 执行 代码 是 非常 简单 的 事情 。 所 有 必须 要 
做 的 就 是 在 元 素 和 作用 域 之 间 提 供 胶 水 代码 。 
数据 绑 定 和 指令 交互 幕后 的 关键 想法 是 : 超 文 本 标记 语言 (HTMI) 应 该 用 于 定义 用 户 
界面 /用 户 体验 (UVUX)，JavaScript 应 该 为 HTML 提供 应 用 编程 接口 。 换 句 话说 , 我 们 的 控 
制 器 应 该 通过 将 函数 和 变量 附加 到 作用 域 中 的 方式 提供 API，HTML 应 该 定义 如 何 使 用 该 
API 创建 页 面 的 用 户 体验 。 与 其 他 许多 框架 中 编写 的 JavaScript 相 比 ， 这 个 想法 是 一 个 重 
要 的 模式 改变 ， 因 为 这 些 框架 中 的 HTML 只 是 提供 了 由 JavaScript 负责 修改 的 基本 结构 。 
这 种 区 别 的 另 一 个 特点 是 : 在 AngularJS 中 ，HTML 是 JavaScript 的 客户 端 ， 而 在 jQuery 
中 ，JavaScript 是 HTML 的 客户 端 。 

除了 已 经 看 到 过 的 filter、controller 和 service 函数 ，AngularJS 模块 还 有 一 个 directive 
函数 ， 用 于 将 指令 附加 到 模块 中 。 可 以 通过 几 种 不 同 的 方式 使 用 该 函数 ， 但 是 最 简单 的 方 
式 就 是 将 指令 名 称 ( 驼 峰 式 命名 法 ) 和 一 个 返回 链接 函数 的 工厂 函数 传 给 它 。 返 回 链接 函数 
的 工厂 函数 将 被 绑 定 到 依赖 注入 中 ,通过 它们 我 们 可 以 通过 在 指令 中 使 用 服务 ,例如 $filter。 
链接 函数 将 在 指令 被 附加 到 的 每 个 元 素 上 调用 。 该 函数 将 接受 DOM 元 素 、 它 的 相关 作用 
域 和 元 素 特性 的 映射 作为 参数 。 下 面 是 创建 myNgClick 指令 的 实际 代码 : 

Var module = angular. 
module ('MyApp', []); 


module.directive('myNgClick', function() { 
return function(scope, element, attributes) { 
element .click(function() { 
scope.$eval (attributes .myNgC1ick) 
scope.s$apply (); 
1); 
} 7 
]) 
注意 在 HIML 中 ， 将 使 用 指令 名 称 的 连 字 符 版 本 访问 该 指令 ， 对 于 本 例 来 说 就 是 
my-ng-click。 例 如 : 
<div my-ng-click="counter = counter + 1"> 
{{Counter}} 
Increment Counter 
</div> 


在 JavaScript 代码 中 为 了 可 读 性 ，AngularJS 将 在 内 部 把 my-ng-click( 连 字符 版 本 ) 转 换 
成 myNgClick( 驼 峰 式 版 本 )。 通常 , 在 JavaScript 中 命名 变量 使 用 驼峰 式 命名 是 正确 的 规范 。 
不 过 ， 通 常 层 倒 样式 表 (CSS) 和 HTML 会 采用 连 字 符 分 隔 的 名 称 ， AngualarJS 将 自动 实现 
这 个 转换 ， 以 便 我 们 在 适当 的 上 下 文中 使 用 适当 的 命名 规范 。 

注意 : 


特性 是 与 HIML 的 DOM 元 素 相关 的 字符 囊 名 / 值 对 。 例如 ， 在 下 面 的 HTML 代码 中 : 


<div style="width:100pzx" my-ng-click="counter = counter + 1"></div> 
元 素 div 有 两 个 特性 style 和 my-ng-click， 它 们 的 值 分 别 为 "width:100px" 和 "counter = 
counter + 1"。 


恭喜 ! 你 已 经 真正 地 实现 了 ngClick 指令 ， 如 同 AngularJS 1.0.8 版 本 中 的 代码 一 样 ! 
严格 地 讲 ， 下 面 是 AngularJS 代码 库 中 的 完整 代码 : 


forEach ( 
"click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter 
mouseleave submit' .split(' '), 


function(name) { 
Var directiveName = directiveNormalize('ng-' + name); 
ngEventDirectives[directiveName] = ['$parse', function($parse) { 
return function(scope, element, attr) { 
var fn = $parsel(attr[directiveName]); 
element .bind (lowercase (name), function(event) { 
scope.$apply (function() { 
fn(scope, {$event:event}); 


现在 我 们 已 经 向 成 为 指令 专家 迈 出 了 第 一 步 。 在 下 一 节 中 ， 将 迈 出 成 为 指令 专家 的 第 
二 步 。 


5.1.2 ”指令 的 帕 累 托 分 布 


指令 的 功能 集 真 的 十 分 丰富 ， 而 且 在 学 习 指令 时 很 容易 掉 进 陷阱 中 。 不 过 ， 我 已 经 发 
现 了 指令 的 帕 累 托 分 布 : 使 用 AngularJS 编写 的 大 量 指令 只 会 用 到 可 用 特性 和 设计 模式 中 
很 小 的 比例 。 第 4 章 定义 的 三 类 指令 ， 每 个 都 对 应 着 一 个 简单 的 设计 模式 。 掌 握 这 些 设计 
模式 将 为 编写 所 需 的 大 量 指令 提供 一 个 坚实 的 基础 。 

这 三 类 指令 分 别 是 : 

e 只 泻 染指 令 一 一 这 些 指令 将 泻 染 作用 域 中 的 数据 ， 但 不 会 修改 数据 。 

e 事件 处 理 封装 器 一 一 这 些 指令 将 封装 事件 处 理 程序 ， 从 而 与 数据 绑 定 进行 交互 ， 例 

如 ngClick。 这 些 指令 不 泻 染 数据 。 

e 双向 指令 一 一 这 些 指令 既 泻 染 数据 也 修改 数据 。 

注意 这 些 指令 的 分 类 并 不 是 AngularJS 代码 库 真 正 的 一 部 分 ， 它 们 也 不 是 面向 对 象 编 
程 意 义 上 的 类 。 我 们 不 会 声明 只 演 染 指令 类 型 的 一 个 新 对 象 。 这 些 分 类 只 是 将 指令 的 主题 
分 解 成 更 加 容易 管理 的 块 的 一 种 有 用 方式 。 
注意 我 们 已 经 知道 了 三 类 简单 的 指令 ， 接 下 来 将 学 习 的 是 编写 每 类 指令 的 设计 模式 。 
这 些 分 类 似乎 是 有 限 的 ， 但 是 它们 涵盖 了 大 量 不 同 的 用 例 。 为 了 演示 这 一 点 ， 将 构建 一 个 
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由 不 同 分 类 的 自 定义 指令 组 成 的 图 像 轮 转 。 轮 转 (carouseD) 是 一 个 常见 的 UI 元 素 ， 它 可 以 
在 幻灯 片 中 循环 显示 一 组 图 像 。 


1. 编写 自 定义 的 只 泻 染指 令 


将 要 编写 的 第 一 种 指令 类 型 是 只 泻 染指 令 。 这 些 指 令 遵守 一 个 简单 的 设计 模式 : 它们 
将 监视 变量 并 更 新 DOM 元 素 ， 以 反映 变量 的 变化 。 这 种 设计 模式 是 灵活 的 ， 大 量 内 置 指 
令 都 使 用 这 种 模式 ， 例 如 ngBind 和 ngClass。 

本 节 将 要 编写 的 只 泻 染指 令 是 实现 轮 播 的 基础 ， myBackgroundImage 指令 ， 它 将 把 
HTML div 元 素 的 背景 图 片 绑 定 到 作用 域 中 的 一 个 变量 。 该 指令 将 监视 所 提供 的 表达 式 ， 
并 更 新 相关 HTML div 元 素 的 background-image CSS 属性 。 言 归 正 传 , myBackgroundImage 
指令 的 代码 如 下 所 示 : 


Var module = angular. 
module ('MyApp', []); 


module.directive('myBackgroundImage', function() { 
return function(scope, element, attributes) { 
scope. $watch (attributes.myBackgroundImage, function (newVal, oldVval) { 
element .css ('background-image'，'url(' + newVal + ')'); 
1); 
La 
1); 


这 个 简单 的 七 行 指令 开始 看 起 来 并 不 多 , 但 是 由 于 使 用 了 数据 绑 定 , 它 变 得 非常 强大 。 
通过 使 用 数据 绑 定 ， 该 指令 允许 把 一 个 JavaScript 变量 绑 定 到 任何 元 素 的 背景 图 片 。 这 对 
于 构建 轮转 来 说 是 非常 重要 的 ， 因 为 轮转 需要 循环 一 组 图 片 。 该 指令 最 基本 的 用 法 是 显示 
一 个 静态 图 片 ， 本 例 中 显示 的 是 Google 的 商标 : 


<body ng-init="image = 'http://upload.wikimedia.org/wikipedia/commons/a/aa/ 
Logo_Google 2013 Official.svg';"> 
<div style="height: 180px; width: 840px; border: lpx solid red" 
my-background-image="image"> 
</div> 
</body> 


而 且 ， 监 视 并 更 新 模式 (分 配 作用 域 用 于 监视 一 个 变量 ， 并 在 值 改变 时 更 新 某 个 CSS 
属性 ) 是 在 编写 指令 时 经 常 看 到 的 模式 。 只 演 染 指令 实际 上 是 由 该 模式 定义 的 。 只 泻 染指 
令 的 一 个 经 典 样 例 是 ngBind， 它 是 { { } } 简 写 幕后 的 指令 。 下 面 是 AngularJS 1.0.8 版 本 
中 ngBind 的 定义 。 你 会 注意 到 该 指令 依赖 于 相同 的 监视 和 更 新 模式 (之 前 用 于 编写 
myBackgroundImage 指令 的 模式 ): 


Var ngBindDirective = ngDirective (function(scope，element，attr) { 
element .addClass('ng-binding') .data('$binding', attr.ngBind); 
scope.$watch(attr.ngBind, function ngBindWatchAction(value) { 

element .text (value == undefined ? '' : value); 


和 
17); 


除了 ngClass 和 ngBind 这 样 的 内 置 指令 ,还 可 以 使 用 这 个 简单 的 设计 模式 编写 各 种 各 
样 强大 的 指令 。 常 见 用 例 从 普通 的 指令 (例如 实现 一 个 在 旧版 Internet Explorer 中 泻 染 输入 
字段 占 位 符 的 指令 ) 到 绚丽 的 指令 (例如 可 以 在 Google Map 上 显示 数据 列表 的 指令 )。 
AngularJS 在 底层 使 用 数据 绑 定 和 指令 完成 了 大 量 的 魔法 。 为 了 揭示 指令 是 如 何 工 作 
的 ， 看 一 下 如 何 使 用 jQuery( 一 个 流行 的 轻 量 级 JavaScript 库 ， 它 与 AngularJS 数据 绑 定 没 
有 类 似 的 地 方 ) 实 现 myBackgroundImage 指令 。 尽管 下 面 的 样 例 不 支持 数据 绑 定 , 但 是 它 提 
供 了 一 个 AngularJS 如 何 处 理 指令 的 高 级 概述 。 类 似 于 下 面 的 代码 ，AngularJS 将 在 所 有 包 
含 指令 名 称 连 字符 版 本 的 元 素 上 运行 链接 函数 : 
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery directive</title> 
<script src="https:// 
ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 


</script> 
<script type="application/javascript"> 
var image = 'http://upload.wikimedia.org/wikipedia/commons/c/ca/' + 


'AngularyJs logo.svg'; 


$ (document) .ready (function() { 
$('div[my-background-image] ') .each (function(i, el) { 
$(el).css({ 
'background-image': 'url(' + eval($ (el).attr 
('my-background-image')) +')', 
Ds 
DD); 
1); 
</seript> 
</head> 


<body> 
<div my-background-image="image" style="width: 700px; height: 180px"> 
</div> 
</body> 


</html> 

与 之 前 的 jQuery 伪 指 令 模 式 相 比 ，AngularJS 有 两 个 关键 的 优点 。 首 先 
myBackgroundImage 指 令 将 与 数据 绑 定 绑 在 一 起 。 一 旦 定义 了 链接 函数 ，JavaScript 将 不 再 
直接 修改 元 素 的 CSS; 所 有 需要 做 的 就 是 将 一 个 新 的 图 片 URL 赋 给 该 变量 ， 所 有 监视 该 变 
量 的 元 素 将 自动 更 新 它们 的 背景 图 片 。 

其 次 ， 伪 指令 在 本 质 上 是 绑 定 到 全 局 作用 域 的 。 换 句 话说 ， 为 使 伪 指 令 工 作 ， 
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my-background-image 特性 中 指定 的 变量 必须 在 包含 了 eval 函数 调用 的 JavaScript 作用 域 中 
可 见 。 换 句 话说， 除非 对 伪 指 令 代 码 做 出 修改 ， 否 则 图 片 变 量 必须 在 全 局 作用 域 中 。 填 充 
全 局 作用 域 是 一 个 短视 的 决定 ,这 将 阻止 高 效 地 重用 代码 ,我 们 应 该 避免 这 种 方式 。 幸 亏 ， 
AngularJS 创建 了 一 个 独立 于 JavaScript 作用 域 的 HTML 作用 域 结构 , 所 以 它 不 需要 在 指令 
的 my-background-image 特性 中 引用 全 局 作用 域 中 的 变量 。 

恭喜 ! 你 已 经 编写 了 第 一 个 只 泻 染 的 指令 ， 并 了 解 了 指令 如 何 使 复杂 的 UI 代码 变 得 
更 容易 。 接 下 来 ， 将 编写 一 个 事件 处 理 程序 指令 ， 并 将 详细 了 解 把 AngularJS 作用 域 用 作 
API 的 概念 。 


2. 编写 自 定义 事件 处 理 程序 指令 


从 高 级 别 上 看 ， 事 件 处 理 程序 指令 可 以 通过 调用 $apply 函数 将 DOM 事件 与 数据 绑 定 
绑 定 在 一 起 。 这 听 起 来 应 该 很 熟悉 ， 因 为 这 正 是 本 节 编写 的 第 一 个 指令 : myNgClick 指令 。 
请 回顾 一 下 它 的 定义 : 


module.directive('myNgClick', function() { 
return function(scope, element, attributes) { 
element .click(function() { 
scope.$eval (attributes.myNgClick); 
scope.$apply(); 
1 
$2 
}); 
指令 myNgClick 是 一 个 标准 的 事件 处 理 程序 指令 , 这 是 第 二 个 将 要 学 习 的 简单 指令 模 
式 。 通 常事 件 处 理 程序 指令 将 注册 一 个 传统 的 非 AngularJS 事件 处 理 程序 (在 作用 域 上 执行 
一 些 操 作 )， 之 后 是 一 个 $apply 调用 。 
不 要 低估 调用 $apply 的 重要 性 ! 忘记 在 事件 处 理 程序 中 调用 $apply 是 在 开始 编写 指令 
时 容易 犯 的 错误 ,因为 所 有 内 置 事件 处 理 程序 指令 将 自动 调用 $apply, 例如 ngClick。 不 过 ， 
因为 事件 处 理 程序 回调 (之 前 传 给 element.click() 的 函数 ) 将 被 异步 调用 ， 所 以 除非 显 式 地 调 
用 $apply, 数据 绑 定 不 知道 何 时 会 触发 Sdigest 循环 。 为 了 真正 理解 这 一 点 , 请 在 myNgClick 
指令 中 移 除 $apply 调用 ， 并 在 浏览 器 中 访问 页 面 : 


module.directive('myNgClick', function() { 
return function(scope, element, attributes) { 
element.click (function() { 
scope.$eval (attributes.myNgClick); 
console.log('Counter is ' + scope.counter); 
]) 
}; 
3 


在 控制 台中 ， 将 看 到 counter 变量 正在 递增 ， 但 是 应 该 显示 counter 变量 值 的 div 永远 


显示 的 都 是 0! 
现在 我 们 已 经 了 解 了 编写 事件 处 理 程序 指令 的 基础 知识 ， 接 下 来 我 们 编写 更 多 有 趣 的 


事件 处 理 程序 指令 集 。 尤 其 是 ， 将 编写 两 个 对 于 使 用 AngularJS 进行 移动 开发 来 说 必 不 可 
少 的 指令 : ngSwipeLeft 和 ngSwipeRight。 通 过 这 些 指 令 以 及 myBackgroundImage 指令 ， 
我 们 可 以 创建 一 个 支持 滑动 的 基本 轮转 。 

为 了 计算 什么 构成 了 一 个 滑动 ， 将 使 用 为 JavaScript 开发 的 、 流 行 的 多 点 事件 库 : 
HammerJS。 实 际 上 , 最 常见 的 事件 处 理 程序 指令 将 把 现 有 的 事件 生成 库 绑 定 到 数据 绑 定 中 。 
类 似 地 ， 在 该 样 例 中 ， 将 编写 把 HammerJS 的 滑动 事件 生成 器 绑 定 到 数据 绑 定 的 指令 。 下 
面 的 3 个 指令 将 绑 定 在 一 起 实现 一 个 轮转 ， 它 们 使 用 了 只 泻 染 和 事件 处 理 程序 设计 模式 : 


module.directive('myBackgroundImage', function() { 
return function(scope, element, attributes) { 
scope.$watch (attributes.myBackgroundImage, function (newVal, 
oldVal) { 
element.css('background-image', 'urll(' + newVal + ')'); 
]) 7 
}; 
1); 


module.directive('ngSwipeLeft', function() { 
return function(scope, element, attributes) { 
Hammer (element) .on('swipeleft', function() { 
scope.$eval (attributes.ngSwipeLeft); 
scope.$apply (); 
]}) 7 
}; 
1); 


module.directive('ngSwipeRight', function() { 
return function(scope, element, attributes) { 
Hammer (element) .on('swiperight', function() { 
scope.$eval (attributes.ngSwipeRight); 
scope.s$apply(); 
1); 
i 
1); 

新 增 的 ngSwipeLeft 和 ngSwipeRight 是 标准 的 事件 处 理 程 序 指令 。 虽 然 其 中 使 用 了 
HammerJS 事 件 处 理 程序 的 特有 语法 , 但 是 从 本 质 上 讲 这 些 指令 与 myNgclick 指 令 是 一 致 的 。 
事件 处 理 程 序 设计 模式 非常 灵活 ， 我 们 可 以 编写 无 数 的 指令 ， 但 只 需要 对 该 设计 模式 做 出 
一 点 小 小 的 改动 。 可 以 使 用 该 设计 模式 编写 的 其 他 指令 包括 : 含有 自 定义 验证 的 提交 按钮 
指令 ，Google Places 自 动 补充 的 指令 封装 器 ， 以 及 当 用 户 输 入 接近 字符 限制 时 为 输入 字段 
显示 出 橘 色 边 框 的 指令 。 

为 了 将 这 些 指令 绑 定 在 一 起 并 提供 数据 ， 需 要 创建 一 个 控制 器 (其 中 定义 了 轮转 中 的 
图 片 列表 ) 和 一 个 辅助 函数 ( 它 将 被 发 给 ngSwipeLeft 和 ngSwipeRighb .控制 器 代码 将 如 下 
所 示 : 


function CarouselController($scope) { 
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$scope.images = [ 
"http://upload.wikimedia.org/wikipedia/commons/c/ca/ 
AngularyJs logo.svg", 
"http://upload.wikimedia.org/wikipedia/commons/a/aa/" + 
"Logo_ Google 2013 Official.svg", 
"http://upload.wikimedia.org/wikipedia/en/9/9e/ 
JQuery logo.svg" 
]; 


$scope.currentIindex = 0; 


$scope.next = function() { 
$scope.currentIindex = 
($scope.currentIndex + 1) % $scope.images.length; 
3 


$scope.previous = function() { 
$scope.currentIindex = $scope.currentIndex == 0 ? 
$scope.images.length -1 : 
S$scope.currentIndex - 1; 
这 
} 
next 和 previous 是 非常 方便 的 函数 ， 它 们 将 分 别 被 ngSwipeLeft 和 ngSwipeRight 所 调 
用 。 现 在 我 们 已 经 创建 了 CarouselController， 接 下 来 创建 一 个 HIML， 并 在 其 中 使 用 滑动 
的 轮转 (在 AngularJS 商标 、Google 商标 和 jQuery 商标 之 间 循 环 ) 是 非常 简单 的 事情 。 现 在 
我 们 已 经 可 以 通过 单 击 并 快速 地 向 左 或 向 右 拖 动 ， 在 桌面 浏览 器 中 触发 向 左 滑动 和 向 右 滑 
动 的 事件 : 
<body ng-controller="CarouselController"> 
<div my-background-image="images [currentIndex]" 
ng-swipe-left="next ()" 
ng-swipe-right="previous()" 
style="height: 120px; width: 600px; border: lpx solid red"> 
</div> 


<hl>Image index: {{currentIndex}}</hl> 
</body> 


请 回顾 一 下 将 作用 域 和 控制 器 用 作 HTML 的 API 的 想法 。 这 三 个 指令 将 使 用 
CarouselController 附加 到 它 对 应 作用 域 中 的 变量 和 函数 来 定义 具体 的 用 户 体验 。 如 果 设 计 
师 决 定 应 该 只 允许 用 户 向 左 滑动 ,那么 这 个 改动 将 被 显示 在 HTML 中 。 一 个 更 加 实际 的 例 
子 是 添加 向 左 循环 和 向 右 循环 的 按钮 。 这 不 需要 修改 控制 器 的 API 一 一 只 需要 在 HTML 中 
ULUX 决定 中 添加 一 点 东西 即 可 : 


<body ng-controller="CarouselController"> 
<div my-background-image="images[currentIndex]" 
ng-swipe-left="next ()" 
ng-swipe-right="previous()" 
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style="height: 120px; width: 600px; border: lpx solid red"> 
</div> 
<h2 ng-click="previous()">Previous</h2> 
<h2 ng-click="next () ">Next</h2> 
<hl>Image index: {{currentIindex}}</h1l> 
</body> 
这 个 模式 创建 了 一 个 强大 的 解 耦合 效果 ， 这 在 团队 环境 中 是 不 可 或 缺 的 。Web 开发 中 
一 个 常见 的 冲突 是 ， 多 个 开发 者 同时 在 不 同上 下 文中 的 相同 代码 上 工作 。 例 如 ， 当 你 在 重 
构 与 服务 器 RESTAPI 的 交互 时 , 设计 师 可 能 正在 尝试 为 新 的 按钮 添加 功能 .在 旧 JavaScript 
范例 中 ， 该 代码 最 可 能 位 于 同一 JavaScript 文件 中 ， 这 意味 着 有 两 个 开发 者 在 修改 相同 的 
代码 。AngularJS 数据 绑 定 和 将 作用 域 用 作为 HIML 设计 的 API 的 想法 帮助 消除 了 这 个 摩 
擦 ， 通 过 在 开发 者 和 设计 者 关心 的 代码 之 间 创 建 一 个 具有 良好 定义 的 、 清 晰 的 分 离 方式 
实现 。 
现在 我 们 已 经 浏览 了 基本 事件 处 理 程序 指令 的 特点 和 应 用 ， 接 下 来 要 学 习 的 是 最 后 一 
个 基本 的 指令 设计 模式 。 最 后 一 个 设计 模式 是 之 前 两 个 指令 的 结合 ， 用 于 协助 管理 指定 变 
量 的 状态 。 


3. 编写 自 定义 双向 指令 


本 节 将 要 学 习 的 第 三 个 也 是 最 后 一 个 设计 模式 就 是 双向 指令 。 该 设计 模式 同时 使 用 了 
只 泻 染 设计 模式 和 事件 处 理 程序 模式 ， 用 于 创建 控制 变量 状态 的 指令 。 尤 其 是 ， 将 实现 一 
个 切换 按钮 指令 ， 用 于 启用 和 禁用 图 片 每 两 秒 钟 一 次 的 自动 循环 。 

这 个 切换 按钮 应 该 既 能 精确 地 反映 底层 JavaScript 变量 的 状态 ， 也 能 在 按钮 被 单 击 时 
切换 JavaScript 变量 的 状态 。 前 者 将 调用 只 泻 染 指令 ， 后 者 将 调用 事件 处 理 程序 指令 。 言 
归 正 传 ， 下 面 是 结合 了 两 种 指令 设计 模式 的 代码 ， 以 及 修改 后 的 CarouselController: 


module.directive('toggleButton'，function() { 
return function(scope, element, attributes) { 


// 监视 和 更 新 

scope.$watch (attributes.toggleButton, function(v) { 
element.val(!v ? 'Disable' : 'Enable'); 

]}) 7 

// 事件 处 理 程序 


element .click(function() { 
scope [attributes .toggleButton] = 
!scope [attributes .toggleButton]: 
scope.Sapply() 7 
1D); 
] 7 
]) 


function CarouselController($scope) { 
$scope.images = [ 
"http://upload.wikimedia.org/wikipedia/commons/c/ca/AngularJs logo.svg" 
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"http://upload.wikimedia.org/wikipedia/commons/a/aa/" + 
"Logo Google 2013 Official.svg", 
"http://upload.wikimedia.org/wikipedia/en/9/9e/JQuery logo.svg" 
]; 


$scope.currentIindex = 0; 


$scope.next = function() { 
$scope.currentIndex = 
($scope .currentIndex + 1) % $scope.images.length; 
}; 


$scope.previous = function() { 
$scope.currentIindex = $scope.currentIndex == 0 ? 
$scope.images.length - 1: 
$scope.currentIindex - 1; 
}; 


$scope.disabled = false; 


setInterval (function() { 

if ($scope.disabled) { 
return; 

} 
$scope.next (); 
$scope.$apply (); 

}, 2000); 

} 


然后 我 们 就 可 以 从 HTML 中 访问 toggleButton 指令 了 ， 如 下 所 示 : 
<input type="button" toggle-button="disabled"> 


还 有 其 他 几 种 有 用 的 指令 ， 可 以 简单 地 结合 只 演 染 指令 和 事件 处 理 程序 指令 来 构建 。 
例如 , 可 以 构建 一 个 YouTube 样式 的 评级 指令 , 允许 用 户 单 击 第 三 颗 星 提供 某 种 三 星 评级 。 
许多 AngularJS 项 目 选择 实现 自己 的 日 期 选择 器 指令 , 这 是 该 设计 模式 的 另 一 个 标准 应 用 。 

你 可 能 已 经 猜 到 了 将 toggleButton 指令 分 解 到 两 个 不 同 的 指令 中 是 非常 直观 的 。 确 实 ， 
我 们 可 以 使 用 内 置 指令 ngBind 和 ngClick 实现 相同 的 功能 : 

<input type="button™ 
ng-click="disabled = !disabled;" 
value="{{ { true : 'Enable', false : 'Disable' }[disabled] }}"> 
那么 哪 种 方式 是 正确 的 呢 ? 这 两 种 方式 都 可 行 ， 但 是 正确 的 选择 取决 于 个 人 的 用 例 。 
AngularJS 使 以 各 种 基于 其 他 指令 构建 指令 的 方式 变 得 非常 简单 ， 下 一 节 将 学 习 更 多 的 细 
节 。 不 过 , 在 软件 开发 中 经 常会 遇 到 这 种 情况 ， 需 要 在 可 用 性 和 可 自 定 义 性 之 间 取 得 平衡 。 

在 toggleButton 的 两 个 不 同 实现 中 , 后 一 个 实现 使 用 了 内 置 指令 ngBind 和 ngClick, 这 将 

使 它 很 容易 改变 每 个 toggleButton 的 行为 , 但 是 重用 它 将 要 求 复制 /粘贴 一 些 重要 的 代码 。 前 
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一 种 实现 使 用 了 一 个 集成 的 toggleButton 指 令 ， 它 易于 使 用 ， 但 难以 改变 单个 toggleButton 
的 行为 。 一 般 来 说 ， 如 果 需 要 将 toggleButton 功 能 用 在 代码 库 的 多 个 不 同 部 分 中 ,那么 集成 
指令 通常 是 正确 的 选择 。 不 过 ， 如 果 需 要 进行 深度 的 自 定 义 ， 那 么 分 离 指 令 的 方式 通常 更 
具有 优势 。 如 在 接 下 来 的 小 节 中 所 见 到 的 , 指令 为 如 何 把 指令 绑 定 在 一 起 提供 了 深度 控制 。 


4. 超越 简单 的 设计 模式 


现在 我 们 已 经 浏览 了 三 种 最 基本 的 指令 设计 模式 ， 就 会 知道 80% 的 指令 可 以 从 众 所 周 
知 的 20% 功 能 中 获 益 。 当 然 ， 这 些 数字 并 不 准确 ， 但 是 通过 到 目前 为 止 所 学 到 的 设计 模式 
我 们 可 以 编写 一 些 复杂 的 指令 ， 并 基本 了 解 在 开源 社区 中 有 多 少 指令 被 实现 了 。 不 过 ， 到 
目前 为 我 们 所 看 到 的 只 是 一 个 开始 。 在 接 下 来 的 小 节 中 ， 将 学 习 AngularJS 提供 的 复杂 特 
性 ， 用 于 重用 代码 和 通过 组 合 其 他 指令 来 构建 指令 。 


5.2 深入 理解 指令 


如 果 之 前 看 到 过 指令 , 那么 可 能 已 经 看 到 了 如 何 使 用 一 种 不 同 的 语法 实现 它们 (返回 一 
个 链接 函数 )。 确实 ， 到 目前 为 止 , 我 们 所 使 用 的 工厂 函数 只 返回 单个 函数 ， 但 是 它 可 以 返 
一 个 丰富 的 配置 对 象 ， 用 于 调整 更 加 底层 的 参数 。 之 前 小 节 中 使 用 的 链接 函数 可 以 使 
用 配置 对 象 的 link 进行 设置 。 例 如 ， 下 面 是 使 用 配置 对 象 语法 实现 的 myBackgroundImage 
指令 : 


module.directive('myBackgroundImage', function() { 
return { 
link: function(scope, element, attributes) { 
scope.$watch (attributes .myBackgroundImage，function (newVal) { 
element .css('background-image', 'url(' + newVal + ')'); 
}) 7 


回 


] 7 
1); 
配置 对 象 还 可 以 调整 其 他 哪些 选项 呢 ? 接 下 来 将 学 习 几 个 实际 中 使 用 的 配置 对 象 设 
置 。 尤 其 是 ， 下 一 节 在 将 之 前 构造 的 轮转 指令 结合 到 单个 指令 的 上 下 文中 ， 将 学 习 三 个 常 
见 的 指令 设置 一 一 template、templateURL 和 controller。 


5.2.1 使 用 模板 的 指令 组 合 


指令 有 两 个 强大 的 组 合 功能 : 将 控制 器 和 HITML 模板 (它们 可 能 包含 了 其 他 指令 ) 与 指 
令 关联 在 一 起 的 能 力 。 默 认 情况 下 ，AnsgularJS 将 把 HTML 模板 的 内 容 插入 为 与 指令 相关 
的 DOM 元 素 的 子 节点 。 它 还 附加 了 一 个 控制 器 。 一 般 的 想法 是 采用 一 种 不 依赖 于 底层 指 
令 实现 细节 的 方式 ， 将 复杂 的 指令 结构 合并 成 一 个 指令 。 在 本 节 ， 将 通过 把 
ImyBacksroundImage 、ngSwipeLeft 、neSwipeRight 和 toggleButton 指令 组 合成 单个 
imageCarousel 指令 ， 来 学 习 这 种 方式 。 下 面 是 imageCarousel 指令 的 实现 : 
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module.directive('imageCarousel', function() { 
return { 
template: 
"<div my-background-image="images[currentIndex]"' + 
a ng-swipe-left="next()"' + 
ng-swipe-right="previous()"' + 
style="height: 120px; width: 600px; border: lpx solid 
red”">" + 
‘</div>' + 
"<input type="button" toggle-button="disabled">' + 
'<hl>Image index: {{fcurrentIndex}j}</hl>'， 
controller : CarouselController, 
link : function(scope, element, attributes) { 
scope.$watch (attributes.imageCarousel, function(v) { 
scope.images = V7 


除了 在 所 有 拥有 指令 特性 的 元 素 上 运行 链接 函数 之 外 ， 该 指令 还 将 把 模板 设置 中 指定 
的 HTML 插入 为 每 个 含有 指令 特性 的 元 素 的 子 节点 。 另 外 ， 该 指令 将 在 模板 HTML 所 在 
的 作用 域 中 运行 CarouselController。 在 下 一 节 ， 将 学 习 可 以 创建 自己 作用 域 的 指令 ， 所 以 
模板 HTML 可 能 在 子 作用 域 中 。 不 过 在 本 例 中 ，CarouselController 将 运行 在 与 指令 所 在 的 
相同 作用 域 中 。 
注意 ，imageCarousel 指令 的 链接 函数 将 使 用 监视 和 “更 新 只 泻 染 ”指令 设计 模式 。 不 
过 , 在 简单 的 链接 函数 幕后 , 模板 有 一 个 以 不 同方 式 与 images 变量 进行 交互 的 指令 生态 系 
统 。 尽 管 由 于 作用 域 的 魔法 ， 这 些 指令 可 以 访问 images 变量 ( 它 被 绑 定 到 与 指令 相关 联 的 
元 素 的 imageCarousel 特性 的 值 )。 例 如 ， 可 以 通过 编写 一 个 简单 的 控制 器 使 用 该 指令 ， 这 
个 控制 器 中 定义 了 将 在 轮转 中 使 用 的 图 片 : 


function BodyController ($scope) { 
$scope.defaultIimages = [ 
ANGULARYJS_LOGO_URL, 
GOOGLE LOGO_URL, 
JQUERY LOGO_URL 


]; 


当 这 个 控制 器 就 绪 后 ， 我 们 就 可 以 使 用 下 面 的 简单 HTML 创建 imageCarousel 指令 : 


<body ng-controller="BodyController"> 
<div image-carousel="defaultImages"></div> 
</body> 


作为 template 设 置 的 蔡 代 方法 ， 还 可 以 使 用 templateURL。 该 设置 将 告诉 AngularJS 向 指 
定 的 templateURI 发 出 一 个 HTTP GET 请 求 ， 并 使 用 服务 器 响应 的 内 容 作 为 指令 的 template。 
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实际 上 , 通常 推荐 使 用 templateURL， 因 为 它 可 以 更 加 清晰 地 分 离 关 注 点 ， 并 且 更 容易 实现 
模板 复 用 ; 不 过 , 这 种 方式 有 一 定 的 性 能 成 本 。 由 templateURL 所 产生 的 性 能 开销 是 由 一 个 
事实 所 限制 的 ，AngularJS 只 发 送 一 个 请 求 到 templateURL， 即 使 多 个 指令 使 用 了 相同 的 
templateURL。 不 过 ， 因 为 template 不 发 出 任何 HTTP 请 求 ， 所 以 它 产生 的 性 能 开销 更 小 。 

现在 我 们 已 经 将 imageCarousel 指令 绑 定 到 一 个 隔离 的 指令 中 。 这 个 强大 的 代码 重用 模 
式 将 使 指令 在 设计 师 之 间 更 加 流行 ， 因 为 它 提供 了 一 种 组 织 复杂 UI 结构 的 复杂 方式 。 与 
开发 者 编写 函数 抽象 出 实现 细节 的 方式 非常 相似 ， 设 计 师 可 以 使 用 指令 构建 出 更 加 易于 重 
用 和 合理 的 高 级 组 件 。 例 如 ， 作 为 开发 者 ， 我 们 更 喜欢 使 用 单个 名 为 readFile 的 函数 ， 而 
不 是 编写 代码 直接 操作 硬盘 。 设 计 师 能 从 中 获得 类 似 的 好 处 ,“ 这 个 div 应 该 含有 标准 的 轮 
转 能 力 ”， 而 不 是 每 次 都 通过 div 元 素 和 事件 处 理 程序 构建 结构 。 

目前 imageCarousel 指令 的 实现 有 两 个 缺点 。 第 一 个 是 Angular 中 一 个 遗憾 的 限制 : 不 
修改 指令 的 代码 就 无 法 改变 指令 的 模板 。 不 过 我 们 的 指令 只 在 自己 的 项 目 中 使 用 ， 所 以 这 
个 限制 不 会 引起 大 的 问题 但是， 如果 我 们 正在 维护 一 个 开源 AngularJS 轮转 ， 例 如 
AngularUI 团队 ,那么 这 就 是 一 个 严重 的 问题 。 在 AngularUI 的 用 例 中 , 无 法 自 定义 模板 将 
阻止 AngularUI 模块 的 客户 端 调整 AngularUI 轮 动 的 外 观 和 感觉 (如 果 不 修 改 代码 的 话 )。 这 
就 是 为 什么 AngularJS 0.10 版 本 发 布 了 两 个 不 同 的 文件 : 一 个 为 所 有 指令 都 指定 了 模板 ， 
另 一 个 所 有 指令 都 未 指定 模板 。 

当 你 尝试 使 用 为 两 个 不 同 的 图 片 集 分 别 使 用 两 个 指令 时 ,第 二 个 缺点 将 变 得 更 加 明显 : 


县 


el 


<body ng-controller="BodyController"> 
<div image-carousel="defaultImages"></div> 
<div image-carousel="otherImages"></div> 
</body> 
两 个 轮转 指令 都 只 显示 出 了 Google 商标 。 为 什么 呢 ? 原因 就 在 于 imageCarousel 指令 
没有 自己 的 作用 域 , 所 以 第 二 个 imageCarousel 指令 将 影响 第 一 个 images 变量 。 幸 运 的 是 ， 
AngularJS 为 指令 作用 域 提 供 了 一 些 高 级 功能 ， 下 一 节 将 进行 学 习 。 


5.2.2 为 指令 创建 不 同 的 作用 域 


如 你 在 之 前 看 到 的 ， 指 令 可 以 管理 自己 的 内 部 状态 。 但 是 ， 为 了 高 效 地 实现 这 一 点 ， 
指令 需要 有 自己 的 作用 域 ， 为 自己 的 内 部 状态 提供 封装 。 幸 运 的 是 ，AngularJS 在 指令 对 象 
中 提供 了 几 个 强大 的 设置 ， 用 于 为 指令 创建 新 的 作用 域 。 

指令 对 象 可 以 通过 下 面 的 三 种 方式 之 一 指定 一 个 作用 域 设置 : 

® { scope: true } 为 指令 的 每 个 实例 创建 一 个 新 的 作用 域 。 

e@ {scope: {} } 为 指令 的 每 个 实例 创建 一 个 新 的 隔离 作用 域 。 

® { scope: false } 是 默认 设置 。 使 用 了 这 个 设置 之 后 ，AngularJS 不 会 为 指令 创建 新 的 

作用 域 。 

第 三 种 方式 正 是 到 目前 为 止 所 使 用 指令 的 方式 。 不 过 如 你 所 见 ， 当 相同 作用 域 中 的 多 
个 轮转 影响 彼此 的 内 部 状态 时 ， 复 杂 的 指令 通常 需要 有 自己 的 作用 域 。 前 两 种 方式 提供 了 
为 指令 创建 自己 作用 域 的 两 种 不 同方 式 。 第 一 种 和 第 二 种 方式 通常 是 混淆 的 源泉 。 区 别 在 
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于 : 第 二 个 选项 将 为 指令 的 每 个 实例 创建 一 个 隔离 作用 域 。 记 住 隔离 作 用 域 不 会 继承 它 的 
父 作 用 域 ， 所 以 隔离 作用 域 中 的 指令 模板 无 法 访问 指令 作用 域 之 外 的 任何 变量 。 尽 管 第 二 
种 方式 听 起 来 似乎 限制 很 大 ， 但 是 它 拥 有 众多 强大 的 特性 ， 需 要 进行 认真 讨论 。 但 首先 ， 
我 们 可 以 使 用 第 二 种 方式 为 imageCarousel 指令 的 内 部 状态 提供 正确 的 封装 。 


注意 : 

为 避免 混淆 ， 在 本 章 的 剩余 内 容 中， 指令 声 明 所 在 的 作用 域 被 称 为 隔离 作用 域 的 父 作 
用 域 。 尽 管 隔离 作用 域 没有 非 隔离 作用 域 所 拥有 的 父 作 用 域 的 概念 ， 但 是 将 隔离 作用 域 放 
在 作用 域 层次 的 上 下 文中 有 许多 好 处 。 尤 其 是 ， 隔 离 作用 域 仍然 是 作用 域 层 次 一 部 分 的 这 
个 事实 是 理解 内 识 的 关键 一 -本 章 涵盖 的 最 后 一 个 主题 。 请 记 住 ， 即 使 隔离 作用 域 不 继承 
父 作用 域 的 内 容 ， 它 仍然 有 父亲 。 

1. 使 用 作用 域 设置 的 第 一 种 方式 

使 用 作用 域 设置 第 一 种 方式 的 代码 如 下 所 示 : 


module.directive('imageCarousel', function() { 


return { 
template: 
"<div my-background-image="images[currentIndex]"' + 
' ng-swipe-left="next ()"' + 
ng-swipe-right="previous()"' + 
style="height: 120px; width: 600px; border: lpx solid 
red">' + 
'</div>' + 


"<input type="button" toggle-button="disabled">' + 
'<hl>Image index: {{currentIindex}}</hl>', 
controller : CarouselController, 
scope : true, 
link : function(scope, element, attributes) { 
scope.$parent.$watch (attributes.imageCarousel, 
function(v) { 
scope.images = V7 


在 这 个 imageCarousel 指令 的 实现 和 原来 的 实现 之 间 有 两 个 关键 的 区 别 。 最 明显 的 区 别 
是 : 使 用 scope 设置 为 指令 的 每 个 实例 创建 一 个 新 的 作用 域 。 第 二 个 区 别 是 这 个 新 的 实现 
将 调用 父 作 用 域 中 的 Swatch 一 一 也 就 是 scope.$parent.$watch()， 而 不 是 scope.$watch()。 这 
个 改动 的 原因 很 微妙 ， 你 可 能 并 未 注意 到 它 ， 因 为 如 果 使 用 scope.$Swatch(0) 的 话 ， 这 个 代码 
仍然 可 以 工作 。 

问题 在 于 $watch0 函数 将 按照 名 字 监 视 指定 作用 域 中 的 指定 值 。 因 此 ， 如 果 
attributes.imageCarousel 碰巧 指定 了 一 个 变量 名 存在 于 指令 的 作用 域 中 , 那么 该 指令 就 无 法 
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监视 到 正确 的 变量 .例如 , 如果 attributes.imageCarousel 有 一 个 images 值 ,那么 scope.$watch() 
将 会 监视 指令 作用 域 中 的 images 变量 。 使 用 scope.$parent.$watch() 通 过 保证 指令 不 会 覆盖 
客户 端 代码 变量 的 方式 ， 改 善 了 这 个 问题 。 

通常 ， 指 令 作者 选择 以 第 二 种 方式 使 用 作用 域 设置 。 将 会 看 到 ， 隔 离 作用 域 的 一 个 主 
要 优点 是 它们 消除 了 出 现 变 量 覆 盖 (variable occlusion) 的 可 能 


2. 使 用 作用 域 设 置 的 第 二 种 方式 


记 住 使 用 作用 域 设置 的 第 二 种 方式 ， 指 定 一 个 JavaScript 对 象 (可 能 为 空 ， 也 就 是 {})， 
为 没有 父 作用 域 的 指令 创建 一 个 新 的 作用 域 。 因 此 ， 之 前 小 节 中 的 scope.$parent.$watch() 
模式 无 法 正常 工作 , 因为 指令 的 作用 域 在 页 面 的 作用 域 层次 之 外 。 如 果 担 心 通过 这 种 方式 ， 
指令 无 法 访问 页 面 作用 域 中 的 变量 , 那么 不 要 担心 一 AngularJS 提供 了 一 种 将 外 部 变量 拉 
入 到 隔离 作用 域 中 的 灵活 方式 。 下 面 是 这 种 工作 方式 的 一 个 样 例 : 


module. directive( imageCarousel ，function() { 


return { 
template: 

Sy my-background-image="images [currentIndex]"' + 
ng-swipe-left="next ()"' + 

. ng-swipe-right="previous()"' + 

style="height: 120px; width: 600px; border: lpx solid 
red">' + 

'</div>' + 


"<input type="button" toggle-button="disabled">' + 
'<hl>Image index: {{currentIindex}}</hl>', 
controller : CarouselController, 
scope : { 
images : '=imageCarousel' 
} 
} 
}); 
作用 域 设 置 中 的 =imageCarousel 语法 是 对 之 前 小 节 中 scope.$parent.$watch() 调 用 的 简 
写 。 在 作用 域 设置 中 ，= 将 告诉 AngularJS: 变量 images 应 该 被 绑 定 到 imageCarousel 特性 
指定 的 变量 , 并 表明 imageCarousel 特性 应 该 在 指令 的 父 作用 域 中 执行 。 我 们 可 以 看 到 这 个 
简写 在 AngularJS 指令 代码 中 使 用 的 非常 广泛 ， 所 以 一 定 要 记 住 它 的 语义 。 尤 其 是 ， 要 记 
住 在 作用 域 设置 中 ， 对 象 键 是 作用 域 中 的 变量 ， 对 象 值 指 的 是 作用 域 变量 应 该 绑 定 到 的 
HTML 特性 。 
那么 这 个 简写 是 不 是 击败 了 使 用 隔离 作用 域 的 观点 呢 ? 实际 上 ， 如 果 需 要 一 个 严格 的 
隔离 作用 域 ， 在 隔离 作用 域 和 页 面 的 作用 域 结构 之 间 没 有 数据 绑 定 ， 那 么 可 以 在 作用 域 设 
置 中 使 用 一 个 空 对 象 人 0。 不 过 ， 严 格 隔 离 作 用 域 的 用 例 比较 有 限 ， 因 为 这 样 的 指令 必须 是 
完全 自 包 含 的 。 这 样 的 指令 通常 被 称 为 组 件 ， 本 章 稍 后 将 进行 讨论 。 
隔离 作用 域 的 简写 = 提供 了 两 个 主要 的 功能 。 第 一 , 书写 =imageCarousel 比 书写 完整 的 
scope.$parent.$watch0) 调 用 要 简洁 得 多 。 第 二 ,作用 域 被 标记 为 隔离 作用 域 的 事实 将 保证 指 
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令 的 模板 不 会 访问 任何 指令 之 外 的 变量 (除非 在 作用 域 设置 中 显 式 地 指定 )。 这 将 使 指令 更 
加 易于 理解 和 使 用 ， 因 为 我 们 可 以 向 客户 保证 自己 的 指令 只 通过 作用 域 设置 与 外 部 世界 进 
行 交互 。 隔 离 作用 域 还 将 用 作 一 种 预防 愚蠢 错误 的 方法 。 例 如 ， 请 尝试 指出 下 面 代 码 中 的 
问题 : 


module.directive('imageCarousel', function() { 
return { 
template: 

'<div my-background-image="defaultImages[currentIndex]"' + 
ng-swipe-left="next ()"' + 
ng-swipe-right="previous()"' + 
style="height: 120px; width: 600px; border: lpx solid 
red”>" 4 

WCG + 


"<input type="button" toggle-button="disabled">' + 
'<hl>Image index: {{currentIndex}}</hl>', 
controller : CarouselController, 
scope : true, 
link : function(scope, element, attributes) { 
scope.$parent.$watch (attributes.imageCarousel, 
function(v) { 
scope.images = Vv; 
}) 7 


3 
js 

模板 中 的 myBackgroundImage 指令 将 使 用 defaultImages 变量 (定义 在 父 作 用 域 中 )。 这 
种 方式 在 某 些 情况 下 可 以 工作 ， 但 是 依赖 于 变量 在 父 作 用 域 中 是 否 存在 是 编写 指令 的 一 个 
糟糕 实践 。 记 住 ， 指 令 被 用 作 面 向 JavaScript 的 HIML 内 API， 不 同 的 控制 器 将 定义 不 同 
的 API。 依 赖 于 父 作 用 域 中 变量 的 指令 将 使 指令 的 API 依赖 于 另 一 个 API， 这 样 客户 只 需 
要 维护 这 个 API 即 可 。 换 名 话说， 指令 是 非常 棒 的 ， 因 为 他 们 允许 定义 HTML 的 抽象 ， 从 
而 避免 了 每 次 使 用 轮转 时 都 重 写 相 同 的 15 行 代码 。 当 客户 希望 搞 清 楚 如 何 使 用 你 的 指令 
时 ， 不 要 让 他 们 不 得 不 阅读 这 个 HTML。 

如 果 不 讨论 AngularJS 为 作用 域 设置 提供 的 其 他 简写 : @ 和 &， 那么 这 个 对 使 用 隔离 作 
用 域 的 指令 的 讨论 就 不 算 完整 。 当 你 刚 开始 使 用 AngularJS 时 ， 这 3 个 简写 之 间 的 区 别 通 
常 是 混淆 的 源泉 。 首 先 ， 注 意 = 是 双向 数据 绑 定 的 简写 。 在 =imageCarousel 实现 中 ， 如 果 要 
修改 指令 作用 域 中 的 images 变量 ， 那 么 这 个 改动 还 将 影响 images 变量 被 绑 定 到 的 父 作用 
域 中 的 任意 变量 ， 例 如 defaultImages。 

另外 ，= 简 写 将 把 images 变量 的 值 绑 定 到 另 一 个 变量 。 这 个 行为 ， 尽 管 非常 平滑 ， 但 
不 允许 将 images 变量 绑 定 到 一 个 AngularJS 表达 式 的 值 。 指 令 属 性 中 表达 式 的 一 个 简单 的 
常见 用 例 是 : imageCarousel 指令 的 标题 。 假 设 我 们 希望 指令 的 用 户 可 以 为 他 们 的 轮转 指定 
己 的 标题 。 如 果 我 们 决定 用 户 可 以 在 标题 中 使 用 表达 式 ， 那 么 这 个 简单 的 任务 将 变 得 复 
杂 许 多 。 例 如 ， 我 们 希望 下 面 表达 式 的 值 显示 为 轮转 的 标题 : 


There are {{defaultImages.length}} images 


@ 简 写 的 存在 为 元 素 特性 中 提供 的 表达 式 提供 了 一 种 单 向 的 、 只 演 染 绑 定 。 换 句 话 说 ， 
通过 使 用 @ 简 写 ， 在 HIML 中 添加 一 个 carouselTitle 特性 ，imageCarousel 指令 的 用 户 就 可 
以 将 轮转 标题 绑 定 到 上 面 的 表达 式 。 下 面 是 启用 了 标题 的 imageCarousel 指令 代码 : 


module.directive('imageCarousel', function() { 


return { 
template: 
"<hl>Title: {{carouselTitle}}</hl>' + 
"<div my-background-image="images[currentIndex]"' + 
ng-swipe-left="next ()"' + 
” ng-swipe-right="previous()"' + 
style="height: 120px; width: 600px; border: lpx solid 
Fed">" 4 
'</div>' + 


"<input type="button" toggle-button="disabled">', 
controller : CarouselController, 


scope : { 
images : '=imageCarousel', 
carouselTitle : '@' 


} 
4 


注意 : 

carouselTitle: '@ ' 设 置 等 同 于 carouselTitle: '@carouselTitle '。 如 果 未 指定 特性 名 的 话 ， 
AngularJS 将 假设 特性 名 称 与 作用 域 变 量 的 名 称 相同 。 例 如 ，images: ' = ' 将 把 images 变量 
绑 定 到 images 特性 指定 的 变量 。 


通过 使 用 该 指令 ， 指 令 的 用 户 可 以 把 轮转 标题 绑 定 到 他 们 所 选择 的 表达 式 。 例 如 : 


<div image-carousel="defaultImages" 

carousel-title="There are {{defaultImages.length}} images"> 
</div> 
<div image-carousel="otherImages" 

carousel-title="I have {{otherImages.length}} images"> 
</div> 


注意 : 因为 carouselTitle 是 指令 作用 域 中 的 变量 ， 所 以 可 以 向 它 赋值 并 履 写 用 户 的 表 
达 式 。 不 过 ， 因 为 @ 简 写 只 提供 了 单 向 绑 定 ， 所 以 任何 对 指令 作用 域 中 carouselTitle 的 改 
动 都 不 影响 指令 作用 域外 的 变量 。 

最 后 一 个 简写 & 实 际 上 是 @ 简 写 的 反 转 。 从 高 级 别 上 看 , & 简 写 将 把 一 个 函数 变量 附加 
到 作用 域 ， 这 个 作用 域 将 在 指令 的 父 作用 域 中 的 对 应 特性 的 值 上 执行 Seval。 如 果 未 使 用 隔 
离 作用 域 ， 那 么 等 同 于 & 简 写 的 代码 将 通过 指令 链接 函数 中 的 下 列 代码 实现 ; 


scope.onChange = function() { 
scope.s$parent.s$eval (attributes.onChange); 
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scope.S$Sparent .Sapply(): 
I 


& 简 写 通 常用 于 提供 一 个 将 自 定义 事件 传输 到 隔离 作用 域 之 外 的 接口 。 可 以 通过 使 用 
及 简写 , 允许 imageCarousel 指令 的 用 户 为 所 泻 染 的 图 片 的 改变 指定 一 个 自 定义 事件 处 理 程 
序 。 尤 其 是 ， 可 以 允许 imageCarousel 指令 每 次 在 指令 的 控制 器 中 调用 next0 和 previous() 
时 ， 执 行 onChange 特性 的 内 容 。 在 本 例 中 ，onChange 特性 递增 一 个 计数 器 ， 它 将 追踪 轮 
转 改变 图 片 的 总 次 数 。 下 面 是 新 的 imageCarousel 指令 的 代码 : 


module.directive('imageCarousel', function() { 
return { 

template: 

"<hl>Title: {{carouselTitle}}</hl>' + 

"<div my-background-image="images[currentIndex]"' + 

u ng-swipe-left="next ()"' + 
ng-swipe-right="previous()"' + 

* style="height: 120px; width: 600px; border: lpx solid 

Fa” > 4 
“<1div>" + 


"<input type="button" toggle-button="disabled">', 
controller : CarouselController, 


scope : { 
images : '=imageCarousel', 
carouselTitle : '@', 
onChange : 'g&' 


} 
1); 


现在 作用 域 有 一 个 onChange 函数 ， 它 将 用 作 onChange 特性 上 S$eval 的 封装 器 。 注 意 ， 
正如 arouselTitle 设置 一 样 ， 隔 离 的 '& " 值 等 同 于 “'&onChange”。 现 在 CarouselController 


控制 器 可 以 在 它 的 next0 和 previous() 函 数 中 调用 该 函数 了 。 下 面 是 新 的 CarouselController 
实现 : 


function CarouselController($scope) { 
$scope.currentIndex = 0; 


$scope.next = function() { 
Var old = $scope.currentIindex; 
$scope.currentIindex = 
($scope.currentIndex + 1) %$ $scope.images.length; 
if ($scope.currentIndex != old) { 
$scope.onChange (); 
} 
1; 


$scope.previous = function() { 
Var old = $scope.currentIindex; 


第 5 章 指 令 


$scope.currentIndex = $scope.currentIndex == 0 ? 
$scope.images.length -1: 
$scope.currentIindex - 1; 
if ($scope.currentIindex != old) { 
$scope.onChange (); 
} 
i 


$scope.disabled = false; 


setInterval (function() { 

if ($scope.disabled) { 
return; 

’ 
$scope.next (); 
$scope.s$apply (); 

}, 2000); 

} 


在 HTML 中 设置 onChange 将 要 执行 的 表达 式 是 非常 简单 的 。 记 住 ，onChange 中 的 表 


达 式 将 针对 指令 的 父 作 用 域 执行 。 为 了 演示 这 一 点 ， 请 看 下 面 这 个 集成 了 onChange 的 
imageCarousel 指令 的 HTML: 


<body ng-controller="BodyController" ng-init="count = 0;"> 
<hl>Image has changed {{count}} times</hl> 
<div image-carousel="defaultImages" 
carousel-title="There are {{defaultImages.length}} images" 
on-change="count = count + 1"> 
</div> 
<div image-carousel="otherImages" 
carousel-title="I have {{otherImages.length}} images" 
on-change="count = count + 1"> 
</div> 
</body> 


注意 count 变量 在 页 面 的 根 作用 域 中 ， 但 是 正在 从 一 个 隔离 作用 域 中 进行 修改 。 这 个 
新 功能 允许 为 指令 定义 许多 复杂 的 HTML 挂钩 。 现 在 ,将 看 到 如 何 将 作用 域 设 置 绑 定 到 指 
令 的 核心 主题 ， 作 为 声明 式 UVUX API。 

再 次 , 记 住 将 指令 用 作 JavaScript API 的 想法 , 这 将 用 于 决定 HTML 中 的 高 级 别 UVUX 
决定 。 =、@ 和 & 简 写 允 许 以 声明 的 方式 添加 额外 的 参数 ,扩展 这 个 JavaScript API。 与 Web 
开发 者 如 何 查看 REST API 并 找到 实现 目标 功能 所 需 的 参数 非常 相似 ， 设 计 师 可 以 轻松 地 
检测 到 作用 域 变量 的 列表 ， 并 明白 他 们 可 以 调整 指令 中 的 什么 参数 ， 而 不 必 深 入 了 解 底层 
代码 。 另 外 ， 因 为 HIML 是 AngularJS 中 所 有 ULUX 决定 的 真正 来 源 ， 这 些 将 在 HTML 
中 进行 调整 ， 而 不 是 使 用 JavaScript 配置 对 象 。 
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5.2.3 ”限制 和 替换 设置 


许多 指令 库 中 大 量 使 用 了 restrict 和 replace 设置 。 这 些 设置 主要 被 用 作 语 法 糖 ， 使 得 
使 用 指令 的 HTML 更 直观 和 令 人 愉悦 。 尽 管 这 些 设 置 并 未 为 使 用 指令 的 方式 添加 更 多 内 
容 ， 但 是 永远 不 要 低估 某 些 特殊 的 、 优 雅 的 语法 糖 的 优点 。 

许多 指令 (例如 imageCarousel 指令 ) 感 觉 上 应 该 只 是 DOM 元 素 。 使 用 imageCarousel 
特性 创建 一 个 div 元 素 并 没有 什么 问题 ， 但 是 如 果 我 们 可 以 忽略 div， 在 HTML 中 创建 一 
个 imageCarousel 标记 是 不 是 很 酷 呢 ? 而 自 定 义 HIML 标记 只 是 通过 restrict 和 replace 设置 
所 能 完成 的 很 酷 的 功能 之 一 。 

直到 此 时 ,指令 完全 是 由 HTML 特性 定义 的 。 实 际 上 , AngularJS 支持 4 种 方式 在 HTML 


中 使 用 指令 : 


。 通过 特性 一 一 <div image-carousel='images'></div> 
e 通过 CSS 类 一 一 <div class="image-carousel: images:"></div> 


。 通过 注释 一 一 <! 一 directive: image-carousel images 一 > 

e 通过 元 素 一 一 <image-carousel></image-carousel> 

可 以 使 用 限制 设置 指定 自 定义 指令 支持 哪些 用 法 。restrict 设置 将 接受 一 个 字符 串 ， 该 
字符 串 列 出 了 指令 允许 的 4 种 用 法 。4 种 用 法 中 的 每 一 种 都 由 单个 字符 表示 : 当 且 仅 当 目 
标 用 法 的 字符 出 现在 restrict 字符 串 中 ， 这 种 用 法 才 是 允许 的 。 对 应 的 字符 如 下 所 示 : 


e 通过 特性 一 一 A' 
e@ 通过 CSS 类 一 一 'C' 
e 通过 注释 一 一 M' 
。 通过 元 素 一 一 EE' 


例如 ， 下 面 是 使 用 了 restrict: 'E' 设 置 的 imageCarousel 指令 : 


module.directive('imageCarousel', function() { 


return { 
restrict: 'E', 
template: 
"<hl>Title: {{carouselTitle}}</hl>' + 
'<div my-background-image="images [currentIndex]"' + 
y ng-swipe-left="next ()"' + 


ng-swipe-right="previous()"' + 
style="height: 120px; width: 600px; border: lpx solid 
red">' + 


'</div>' + 
"<input type="button" toggle-button="disabled">', 
controller : CarouselController, 


scope : { 
images : '=", 
carouselTitle : '@', 
onChange : ‘'g&' 
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注意 ， 作 用 域 的 images 变量 现在 已 经 被 绑 定 到 了 元 素 的 images 特性 ， 而 不 是 之 前 的 
imageCarousel 特性 。 通 常 ， 指 令 不 会 同时 在 restrict 中 同时 支持 E 和 A 值 。 这 是 因为 ， 对 
于 A 来 说 ,指令 自身 就 是 一 个 含有 相关 值 的 特性 。 对 于 EE 来 说 , 没有 关联 到 指令 自身 的 字 
符 串 ， 因 为 指令 是 一 个 HTML 标记 而 不 是 一 个 特性 。 调和 这 个 区 别 引起 的 麻烦 通常 比 它 的 
价值 更 大 ， 所 以 我 们 可 能 会 选用 其 中 一 个 。 

下 面 是 使 用 了 支持 HTML 标记 的 imageCarousel 指令 的 相关 HTML 代码 : 


<body ng-controller="BodyController" ng-init="count = 0;"> 
<hl>Image has changed {{count}} times</hl> 
<image-carousel images="defaultImages" 
carousel-title="There are {{defaultImages.length}} images" 
on-change="count = count + 1"> 
</image-carousel> 
<image-carousel images="otherImages" 
carousel-title="I have {{otherImages.length}} images" 
on-change="count = count + 1"> 
</image-carousel> 
</body> 


尽管 没有 额外 的 功能 , 但 是 这 个 新 的 imageCarousel 指令 在 语法 上 更 加 优雅 。 值得 注意 
的 一 个 限制 是 : E 样式 的 指令 在 Intemet Explorer 9 和 更 早 版 本 中 无 法 正常 工作 。 有 一 个 使 
用 了 MIT 许可 的 JavaScript 库 ， 称 为 HIMLS shiv， 在 旧版 本 Internet Explorer 中 需要 包含 
它 ( 本 章 样 例 代码 中 已 经 包含 了 一 个 副本 ) 才 能 正常 使 用 EE 样式 的 指令 。 

如 果 在 页 面 加 载 之 后 查看 DOM 的 状态 , 将 看 到 imageCarousel 标记 会 以 模板 中 HTML 
的 父 级 的 方式 存在 于 DOM 中 。 下 面 是 使 用 了 imageCarousel 之 后 的 DOM 状态 : 


<image-carousel images="defaultImages" 
Carousel-title="There are 3 images" 
on-change="count = count + 1" 
class="ng-isolate-scope ng-scope"> 
<hl class="ng-binding"> 
Title: There are 3 images 
</h1l> 
<div my-background-image="images [currentIndex]" 
ng-swipe-left="next ()" 
ng-swipe-right="previous()" 
style="height: 120px; width: 600px; border: lpx solid red; 
background-image: urll(. 交 By 
</div> 
<input type="button" toggle-button="disabled" value="Disable"> 
</image-carousel> 


对 于 大 多 数 指令 来 说 ， 该 行为 就 足够 了 。 不 过 如 果 非 常 希望 在 DOM 中 使 用 
imageCarousel 标记 ， 那 么 可 以 使 用 replace 设置 。replace 设置 是 一 个 布尔 值 (默认 为 false)， 
它 将 决定 模板 是 被 插入 为 DOM 元 素 的 子 节点 ， 还 是 完全 替换 DOM 元 素 。 下 面 是 如 何 结 
合 使 用 replace 设置 和 imageCarousel 指令 的 方式 : 
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module.directive('imageCarousel', function() { 
return { 
restrict: ‘'E', 
replace: true, 


template: 
"<div>' + 
<hl>Title: {{carouselTitle}}</hl>' + 
' <div my-background-image="images [currentIndex]"' + 
本 ng-swipe-left="next ()"'" + 
ng-swipe-right="previous()"' + 
a style="height: 120px; width: 600px; '+ 
border: lpx solid red">' + 


' </div>' + 
' <input type="button" toggle-button="disabled">' + 
‘</div>', 
controller : CarouselController, 
scope : { 
images : '=', 
carouselTitle : '@', 
onChange : 'g&' 


} 
1); 


与 之 前 的 实现 相 比 ，replace: true 实现 中 有 两 个 关键 的 区 别 。 第 一 个 是 明显 的 replace: 
true 设置 。 第 二 个 是 该 HTML 模板 现在 包含 了 一 个 div 标记 ， 其 中 封装 了 hl、div 和 input 
标记 。 当 你 查看 含有 新 指令 的 DOM 的 状态 时 ， 使 用 新 div 标记 的 原因 就 很 清晰 了 : 


<div images="defaultImages" 
Carousel-title="There are 3 images" 
on-change="count = count + 1"> 
<hl class="ng-binding"> 
Title: There are 3 images 
</h1l> 
<div my-background-image="images [currentIndex]" 
ng-swipe-left="next ()" 
ng-swipe-right="previous()" 
style="height: 120px; width: 600px; border: lpx solid red; 


background-image: url(. . .);"> 
</div> 
<input type="button" toggle-button="disabled" value="Disable"> 
</div> 


设置 replace: true 将 使 用 指令 HTML 模板 中 的 根 元 素 蔡 换 image-carousel 标记 一 一 在 本 
例 中 为 项 级 div 标记 。 注 意 HTML 模板 中 必须 只 有 一 个 根 元 素 ;否则 ，AngularJS 将 抛 出 


一 个 错误 : Template must have exactly one root element。 


5.2.4 ”继续 前 行 


现在 我 们 已 经 学 习 了 如 何 使 用 指令 对 象 的 基本 设置 ， 所 以 现在 就 有 了 足够 的 知识 能 够 
理解 以 后 看 到 的 大 多 数 开源 指令 。 另 外 ， 我 们 已 经 构建 了 相当 灵活 的 图 片 轮转 。 在 本 章 的 
最 后 一 节 ， 将 深入 学 习 指 令 对 象 中 两 个 最 复杂 的 设置 : compile 和 transaclude。 这 些 设置 不 
会 经 常 出 现 ， 但 是 在 特定 的 用 例 中 它们 是 不 可 缺少 的 。 在 下 一 节 ， 将 通过 浏览 ngRepeat 
指令 的 内 部 细节 和 为 imageCarousel 指令 添加 关键 内 容 的 方式 , 深入 学 习 这 些 设 置 是 如 何 工 
作 的 。 


5.3 在 运行 时 改变 指令 模板 


你 可 能 已 经 注意 到 了 之 前 章节 中 使 用 的 指令 有 一 个 限制 : HTML 模板 是 静态 的 。 这 意 
味 着 当前 的 imageCarousel 指令 总 是 有 标题 的 。 不 过 ,使 用 了 高 级 编译 和 内 嵌 设 置 后 ,我 们 
可 以 允许 imageCarousel 指令 的 用 户 以 复杂 的 方式 修改 模板 。 稍 后 浏览 ngRepeat 的 简化 实 
现时 将 会 看 到 : 这 些 设置 还 与 ngRepeat 指令 如 何 工作 紧密 相关 。 


5.3.1 内 赃 


根据 维基 百科 ,内 嵌 (transclusion) 就 是 将 一 个 文档 中 通过 引用 包含 另 一 个 文档 。 该 术语 
由 TedNelson 创造 , 他 因 发 明 术语 超 文本 (HTTP 和 HTML 中 的 HT) 而 被 众人 所 知 。 与 这 个 
定义 一 致 ，AngularJS 指令 的 transclude 设置 及 其 对 应 的 ngTransclude 指令 用 于 在 指令 的 
HTML 模板 中 引用 外 部 的 HTML 代码 。 换 名 话说， 内 媒人 允许 参数 化 指令 的 模板 ， 从 而 允许 
基于 个 人 需求 修改 模板 中 的 某 些 HTML。 

类 似 于 scope 设置 , transclude 设置 可 以 接受 三 个 不 同 值 中 的 一 个 。transclude 设置 默认 
为 false， 但 是 可 以 将 它 设置 为 true 或 者 字符 串 'element'。 如 果 内 网 似乎 有 点 不 够 直观 ， 请 
不 要 担心 ;一 旦 开始 学 习 一 个 直观 的 样 例 ， 你 就 会 知道 它 实际 上 非常 简单 。 


1. 使 用 transclude:true 设置 


下 面 是 实际 中 使 用 transclude:true 的 一 个 基本 样 例 。 首 先 ， 下 面 是 一 个 简单 的 指令 ， 它 
将 使 用 指定 的 名 称 介绍 一 个 人 : 


module.directive('ngGreeting', function() { 
return { 
restrict: 'E', 
transclude: true, 
template: 
'Hi, my name is ' 十 
'<span ng-transclude></span>', 


i 
1 


注意 ,模板 HTML 有 一 个 含有 nsg-transclude 特性 的 元 素 . 特 性 ng-transclude 意味 着 span 
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的 内 容 将 被 原始 HTML 元 素 的 内 容 所 替代 。 下 面 是 ngGreeting 在 HTML 中 的 使 用 方式 : 


<ng-greeting> 
Val 

</ng-greeting> 

<br> 

<br> 

<ng-greeting> 
<b>Val </b> 

</ng-greeting> 


当 AngularJS 完成 后 ， 如 果 查 看 DOM 的 状态 的 话 ， 真 正 的 魔法 已 经 发 生 了 : 


<ng-greeting> 
Hi, my name is 
<span ng-transclude=""> 
<span class="ng-scope"> 
Val 
</span> 
</span> 
</ng-greeting> 
<br> 
<br> 
<ng-greeting> 
Hi, my name is 
<span ng-transclude=""> 
<b class="ng-scope"> 
Val 
</b> 
</span> 
</ng-greeting> 


恭喜 ! 现在 你 有 了 一 个 含有 参数 化 模板 的 指令 ! AngularJS 将 把 设置 在 指令 元 素 中 的 任 
何 HTML 添加 到 指令 的 模板 中 。 

不 过 ， 这 如 何 与 隔离 作用 域 一 起 工作 呢 ? 如 果 ngGreeting 有 一 个 隔离 作用 域 ， 是 否 意 
味 着 所 有 内 岩 在 ngGreeting 指令 中 的 HIML 将 只 能 够 访问 隔离 作用 域 中 的 变量 ?” 下面 是 含 
有 隔离 作用 域 的 ngGreeting 指令 : 


module.directive('ngGreeting', function() { 
return { 
restrict: 'E', 
transclude: true, 
scope: {}, 
template: 
'Hi, my name is ' + 
"<span ng-transclude></span>', 
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现在 尝试 使 用 含有 内 嵌 HTML 的 指令 ， 其 中 包含 一 个 绑 定 到 隔离 作用 域 之 外 变量 的 
绑 定 : 


<body ng-init="myName = 'Val';"> 
<ng-greeting> 
{{ myName }} 
</ng-greeting> 
</body> 


一 旦 浏览 器 完成 泻 染 后 , 这 段 代码 在 DOM 中 应 该 显示 成 什么 样 呢 ? 结 果 是 AngularJS 
做 了 正确 的 事情 : 它 允 许 内 嵌 的 HTML 访问 变量 myName， 尽 管事 实 上 HTML 被 内 和 嵌 到 
个 隔离 作用 域 中 ! 


<body ng-init="myName = 'Val';"> 
<ng-greeting class="ng-isolate-scope ng-scope"> 
Hi, my name is 
<span ng-transclude=""> 
<span class="ng-scope ng-binding"> 
Val 
</span> 
</span> 
</ng-greeting> 
</body> 


鉴于 隔离 作用 域 的 特性 ， 这 似乎 是 有 点 奇怪 的 决定 。 实际 上 ， 内 嵌 的 HTML 实际 上 并 
不 是 在 隔离 作用 域 中 执行 的 ， 它 将 在 隔离 作用 域 的 父 级 中 执行 ! 为 了 演示 这 一 点 ， 请 尝 i 
在 隔离 作用 域 中 添加 一 个 变量 : 


module.directive('ngGreeting', function() { 
return { 

Ostiliets "BE" 

transclude: true, 

scope: {}, 

template: 
'Hi, my name is ' + 
"<span ng-transclude></span>', 

link: function(scope) { 
scope.lastName = 'Karpov'; 


} 
}3; 
1); 


现在 ， 尝 试 从 内 嵌 的 HTML 中 访问 这 个 作用 域 变量 


<body ng-init="myName = 'Val';"> 
<ng-greeting> 
{{ myName }} {{ lastName }} 
</ng-greeting> 
</body> 
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变量 未 在 内 嵌 的 HTML 中 定义 ， 所 以 输出 将 显示 为 “Hi, my name is Val.”。 这 是 因为 
内 嵌 HTML 执行 的 时 候 就 像 指 令 根本 没有 作用 域 一 样 。 这 个 决定 使 指令 的 使 用 更 加 容易 ， 
因为 我 们 可 以 编写 内 嵌 HTML, 而 不 必 担心 指令 使 用 的 是 隔离 作用 域 还 是 任何 其 他 作用 域 。 


2. 使 用 transclude:'element 设 置 


transclude: 'element' 设 置 的 工作 方式 几乎 与 transclude: true 完全 一 致 ， 但 是 有 两 个 小 小 
的 区 别 。 首 先 使 用 transclude: 'element' 设 置 时 ， 需 要 负责 在 编译 设置 中 修改 DOM( 下 一 节 将 
进行 讲解 )， 除 非 指定 了 replace: true。 刚 开始 使 用 transclude:"element "设置 时 ， 这 是 一 个 党 
见 的 问题 : 如 果 不 设 置 compile 或 者 replace， 那 么 指令 根本 不 会 出 现 ! 

另外 ，transclude: 'element' 设 置 将 以 某 种 程度 上 类 似 于 replace: true 的 方式 修改 DOM。 
下 面 是 使 用 了 transclude: 'element' 设 置 的 ngGreeting 指令 : 


module.directive('ngGreeting', function() { 
return { 
restrict: ‘"E’, 
transclude: 'element', 
replace: true, 
scope: {}, 
template: 
'<div><hl ng-transclude></hl></div>', 
link: function (scope) { 
scope.lastName = 'Karpov'; 
} 
}; 
3 


使 用 下 面 的 HIML: 


<ng-greeting> 
Hi, my name is {{ myName }} 
</ng-greeting> 


在 浏览 器 完成 泻 染 之 后 得 到 的 最 终 DOM 状态 为 : 


<body ng-init="myName = 'Val';"> 
<div> 
<hl ng-transclude=""> 
<ng-greeting class="ng-isolate-scope ng-scope ng-binding"> 
Hi, my name is Val 
</ng-greeting> 
</h1> 
</div> 
</body> 


如 果 已 经 设置 了 transclude: true, 那么 ng-greeting 标 记 不 会 出 现在 这 里 。 相 反 , AngularJS 


将 插入 一 个 span 标记 。 如 果 需 要 将 整个 指令 声明 元 素 拉 入 到 模板 中 ,并 尝试 避免 将 内 容 封 
装 到 span 标记 中 ， 那 么 这 种 行为 是 非常 有 用 的 。 这 将 给 予 指令 的 用 户 对 模板 中 HTML 更 


加 精细 的 控制 。 

现在 我 们 已 经 学 习 了 内 嵌 是 如 何 工 作 的 ， 接 下 来 该 通过 学 习 编译 设置 来 完成 对 指令 的 
学 习 了 。 

5.3.2 ”编译 设置 或 者 编译 与 链接 

对 于 初学 者 来 说 ，Compile 函数 和 它 与 link 函数 的 关系 是 一 个 常见 的 混 消 来源。 对 于 
大 部 分 将 要 编写 的 指令 来 说 ， 编 译 设置 是 不 必要 的 。 使 用 Compile 函数 有 两 个 主要 原因 。 
第 一 个 是 解决 含有 大 量 DOM 操作 的 指令 的 性 能 问题 一 -最 常见 的 样 例 是 ngRepeat 和 创建 
多 个 DOM 元 素 的 类 似 指 令 。 第 二 个 原因 是 编译 函数 可 以 修改 指令 的 模板 。 不 过 第 二 个 原 
因 会 受 一 点 限制 ， 因 为 Compile 函数 将 在 指令 的 作用 域 被 创建 之 前 运行 。 因 此 ，Compile 
函数 无 法 访问 指令 的 作用 域 ， 所 以 它 不 能 计算 特性 。 

那么 Compile 函数 真正 的 用 途 是 什么 呢 ? 在 本 节 , 将 通过 构建 内 风 ngRepeat 指令 的 简 
化 版 本 ， 浏 览 Compile 函数 的 优点 和 限制 。 

将 把 ngRepeat 指 令 简化 为 ngRepeatOnce， 实 现 一 个 常见 的 AngularJS 性 能 优化 : 减少 页 
面 中 监视 器 的 数量 。 回 顾 第 4 章 “ 数 据 绑 定 ” 中 ,我 们 看 到 了 在 一 个 大 型 数组 上 使 用 ngRepeat 
指令 将 使 页 面 变 得 迟缓 ， 因 为 每 个 Sapply 调 用 必须 迭代 整个 数组 。 现 在 ngRepeatOnce 通 过 
不 在 底层 数组 上 调用 $watch 的 方式 改善 了 这 个 问题 。 该 指令 在 用 户 从 底层 数组 添加 或 者 删 
除 元 素 时 不 会 更 新 ， 但 是 它 允 许 处 理 比 ngRepeat 更 大 的 数组 。 尽 管 无 法 在 元 素 添 加 或 者 删 
除 时 更 新 是 一 个 限制 ， 但 是 在 许多 用 例 中 这 个 功能 是 不 必要 的 。 

要 记 住 关 键 的 一 点 :不 应 该 依赖 于 同时 在 指令 对 象 中 设置 Compile 和 1link 函 数 .Compile 
函数 被 期 望 返 回 一 个 link 函数 。 如 果 覆 写 了 默认 的 编译 设置 ， 链 接 设 置 将 被 忽略 ， 除 非 显 
式 地 在 链接 设置 中 返回 该 函数 ,将 在 ngRepeatOnce 指令 中 看 到 , 设置 链接 函数 是 不 必要 的 ; 
可 以 只 让 Compile 函数 返回 一 个 匿名 的 link 函数 。 下 面 是 ngRepeatOnce 指令 的 代码 : 


module.directive ('ngRepeatonce'，function() { 
return { 
restricts "A', 
transclude: 'element', 
compile: function(originalEl, attributes, transcludeFn) { 
return function(scope, element, attributes) { 
Var loop = attributes.ngRepeatOnce.split(' in '); 


Var elementScopeName = loop[0]; 
Var arr = scope.$eval (loop[1]); 


for (var i = 0; i < arr.length; ++i) { 
Var childScope = scope.$new!(); 
childscope['$index'] = i; 
childScope [elementScopeName] = arr[i]: 


transcludeFEn (childScope，function (clLlone) { 
originalEl .parent() .append (clone); 
]}) 
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这 段 代码 开始 看 起 来 有 点 吓人 ， 但 是 一 旦 按 步 又 来 分 析 它 ， 它 就 变 得 非常 简单 了 。 首 
先 ， 为 了 复制 ngRepeat 优雅 的 in 循环 语法 ， 使 用 字符 串 'in ' 对 输入 字符 串 进行 分 隔 。 左 侧 
是 应 该 将 每 个 数组 元 素 赋 给 对 应 子 作用 域 中 的 名 字 ， 右 侧 是 将 要 遍历 的 数组 。 接 下 来 ， 遍 
历数 组 ， 为 每 个 元 素 创建 一 个 新 的 作用 域 ， 并 在 每 个 新 的 作用 域 上 调用 transcludeFn 函数 。 
这 个 函数 将 使 用 我 们 提供 的 作用 域 创 建 一 个 新 的 DOM 元 素 ， 并 内 嵌 在 由 内 嵌 设 置 指定 的 
HTML 中 。 然 后 transcludeFn 函数 将 使 用 新 创建 的 DOM 元 素 触发 回调 ， 需 要 负责 将 它 插 
入 到 DOM 合适 的 位 置 。 

恭喜 ! 你 已 经 实现 了 简化 的 并 且 有 用 的 ngRepeat 版 本 ! 对 于 该 指令 来 说 ，Compile 函 
数 是 不 可 缺少 的 ， 因 为 Compile 函数 提供 的 transcludeFn 函数 允许 我 们 使 用 正确 内 嵌 的 作 
用 域 创建 一 个 新 的 DOM 元 素 。 实 际 上 ， 没 有 Compile 函数 ， 像 ngRepeat 这 样 的 指令 将 变 
得 极其 难于 编写 。 不 过 ， 多 亏 了 编译 和 内 钳 设 置 ， 指 令 可 以 通过 强大 但 直观 的 方式 操作 
DOM。 例 如 ，ngRepeat 指令 的 实现 是 相当 复杂 的 ， 并 且 要 求 对 某 些 AngularJS 深入 的 功能 
有 所 了 解 ， 但 是 使 用 ngRepeat 指令 是 非常 简单 和 直观 的 。 


5.4 小 结 


如 果 已 经 成 功 完成 了 本 章 内 容 的 学 习 ， 那 么 恭喜 你 ! 你 学 到 了 所 有 编写 高 度 复杂 指令 
(可 以 让 浏览 器 做 任何 事情 ) 所 需 的 工具 。 我 们 学 习 了 可 以 仅仅 使 用 一 个 链接 函数 编写 的 三 
类 指令 : 只 演 染 指令 ,例如 myBackgroundImage; 事件 处 理 程序 指令 ， 例 如 swipeLeft 和 
swipeRight; 和 双向 指令 ， 例 如 toggleButton。 然 后 学 习 了 如 何 通 过 指令 对 象 和 它 的 设置 使 
用 模板 将 指令 组 合 在 一 起 。 最 后 ， 深 入 了 解 了 指令 的 模范 ， 并 学 习 如 何 使 用 内 典 和 编译 设 
置 参数 化 和 组 合 指令 模板 。 

所 有 这 些 概念 都 是 通过 一 个 概念 绑 定 在 一 起 的 ， 这 个 概念 就 是 将 指令 用 作 操 作 
DOM( 绑 定 到 由 控制 器 指定 的 UVUX API 中 ) 的 规则 。 像 模板 和 内 嵌 这 样 的 工具 允许 将 高 度 
可 自 定义 的 HTML 和 JavaScript 包 轻松 地 封装 到 一 个 从 HTML 中 可 以 访问 的 包 里 , 并 绑 定 
到 控制 器 和 数据 绑 定 。 指 令 在 高 级 别 上 提供 了 一 个 HTML 视图 的 清晰 抽象 ,这样 我 们 就 可 
以 获得 轮转 和 其 他 UI 控 件 ， 而 不 是 低级 别 的 div 元 素 。 另 外 ， 像 作用 域 设置 这 样 的 工具 
允许 把 数据 绑 定 绑 定 到 指令 中 ， 所 以 我 们 的 指令 可 以 通过 简洁 的 和 强大 的 方式 集成 数据 
绑 定 API。 
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本 章 内 容 : 

在 模板 中 使 用 ngInclude 指令 
模板 的 性 能 影响 

使 用 $location 保存 页 面 状态 

使 用 ngView 在 不 同 视图 之 间 进 行路 由 
使 用 ngView 实现 单 页 面 应 用 
单 页 面 应 用 的 搜索 引擎 集成 

视图 之 间 的 动画 转换 


本 章 的 样 例 代码 下 载 : 
可 以 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文件 。 


在 本 章 , 将 学 习 如 何 使 用 AngularJS 的 模板 系统 、$location 服务 和 AngularJS 的 客户 端 
路 由 系统 。 通 过 使 用 这 些 构建 块 ， 可 以 创建 一 个 单 页 面 应 用 (简称 SPA)。SPA 范例 指 的 是 
构建 一 个 完全 正常 运行 的 Web 应 用 并 且 永 远 不 重新 加 载 页 面 .SPA 通过 支持 使 用 JavaScript 
从 服务 器 加 载 HIML( 超 文本 标记 语言 ) 的 方式 消除 了 痛苦 的 页 面 重 载 ， 从 而 提供 了 对 网 站 
用 户 体验 (UX) 极 其 精细 的 控制 。 

为 了 完全 理解 SPA 在 AngularJS 中 是 如 何 工 作 的 ， 需 要 理解 模板 、 位 置 和 路 由 是 如 何 
工作 的 。 本 章 将 被 分 为 三 个 部 分 ， 每 个 部 分 都 对 应 于 这 三 个 构建 块 中 的 一 个 。 模 板 一 节 和 
位 置 一 节 几 乎 是 完全 独立 于 彼此 的 , 所 以 如 果 仅 仅 希望 学 习 模 板 , 但 不 学 习 $location 服务 ， 
或 者 相反 ， 请 随意 跳 到 目标 章节 。 不 过 ， 第 三 个 小 节 是 关于 如 何 使 用 AngularJS 路 由 框架 
构建 SPA 的 ， 它 要 求 必 须 熟 悉 前 两 个 小 节 中 的 信息 。 
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在 本 章 的 课程 中 ， 将 构建 一 个 SPA 样 例 : 图 书目 录 。 该 应 用 将 使 用 主 表明 细 
(master-detai) 设 计 模式 ， 这 意味 着 将 有 两 个 视图 : 一 个 用 于 显示 图 书 的 主 列表 ， 另 一 个 视 
图 用 于 显示 每 个 图 书 的 细节 信息 。 在 AngularJS 中 ， 术 语 “ 模 板 ” 和 “视图 ”基本 是 可 以 
相互 交换 的 ， 尽 管 术 语 “ 视 图 ”通常 描述 的 是 绑 定 到 ngView 指令 (第 三 部 分 将 进行 学 习 ) 
的 一 个 模板 。 

本 章 将 使 用 一 个 NodeJS 超 文本 传输 协议 (HTTP) 服 务 器 提供 HTML 内 容 。HTTP 服务 
器 是 必需 的 ， 因 为 AngularJS 将 使 用 JavaScript HTTP 请 求 加 载 模板 ， 如 果 只 是 使 用 fle:// 
在 浏览 器 中 打开 一 个 HTML 文件 ， 这 是 无 法 正常 工作 的 。 如 果 尚 未 安装 NodeJS， 那 么 请 
访问 网 址 http://www.nodejs.org 并 执行 所 选择 平台 的 对 应 指令 。 在 安装 了 NodeJS 之 后 ， 请 
从 本 章 样 例 代码 的 根 目录 中 运行 npm install， 此 时 我 们 应 该 能 够 通过 运行 node serverjs 命 
令 在 端口 8080 上 启动 一 个 HITP 服务 器 。 该 服务 器 简单 地 通过 HTTP 协议 提供 静态 文件 ， 
所 以 我 们 应 该 能 够 在 浏览 器 中 通过 访问 地 址 http://localhost:8080/angularjs 查看 文件 
angularjs。 

不 过 ， 图 书目 录 应 用 不 会 从 服务 器 加 载 数据 。 将 使 用 在 Sbooks 服务 中 包含 的 一 个 硬 编 
码 的 图 书 列表 (参见 样 例 代 码 中 的 bookjs)。 下 面 是 Sbooks 服务 的 代码 。 它 将 主要 被 用 作 服 
务 的 存根 ， 通 过 它 可 以 加 载 一 个 图 书 的 列表 或 者 加 载 特定 的 图 书 。 


Var booksService = function() { 
Var books = [ 

{ 

dy 

title: "Les Miserables", 

author: "Victor Hugo", 

image: "// upload.wikimedia.org/wikipedia/commons/6/6c/ 

Jean Valjean.JPG", 

preview: "In 1815, M. Charles-Francois-Bienvenu Myriel was Bishop..." 
hi 


ds 2, 
title: "The Book of Five Rings", 
author: "Musashi Miyamoto", 
image: "// upload.wikimedia.org/wikipedia/commons/2/20/ 
Musashi ts pic.jpg", 
preview: "I have been many years training in the Way of strategy..." 
}, 


_id:. 3, 
title: "Moby Dick", 
author: "Herman Melville", 
image: "// upload.wikimedia.org/wikipedia/commons/3/36/" + 
"Moby-Dick FE title page.jpg", 
preview: "Call me Ishmael. Some years agois*neVver mind how long 
precisely..." 
}, 
‘ 
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_ids #; 
title: "The Hour of the Dragon", 
author: "Robert E. Howard", 
image: "// upload.wikimedia.org/wikipedia/en/6/60/ 
Conan the Conqueror.jpg", 
preview: "The long tapers flickered, sending the black shadows..." 
} 
{ 
3 
title: "The Brothers Karamazov", 
author: "Fyodor Dostoyevsky", 
image: "// upload.wikimedia.org/wikipedia/commons/2/2d/" + 
"Dostoevsky-Brothers Karamazov.jpg", 
preview: "Alexey Fyodorovitch Karamazov was the third son..." 
} 
]; 


return { 
getall: function() { 
return books; 
}, 
getById: function(id) { 
for (var i = 0; i < books.length; ++i) { 
if (books[i]. id === id) { 
return books[i]; 
} 
} 


return null; 


£1 
}; 
出 于 本 章 的 目的 ,将 使 用 之 前 所 示 的 简单 双 函 数 接口 :用 于 加 载 所 有 5 本 图 书 的 getAllO 
和 按照 标志 符 id 加 载 特定 图 书 的 getById(id)。 每 本 书 除了 标志 符 都 还 包含 了 4 个 属性 :title、 
author、image 和 preview( 用 于 显示 图 书 的 前 几 段 内 容 )。 现 在 可 以 开始 使 用 这 个 新 的 服务 编 
写 第 一 个 模板 了 。 


6.1 第 1 部 分 : 模板 


Web 开发 中 一 个 常见 的 难点 在 于 重用 HIML.。 某 个 特定 的 HIML 可 能 出 现在 多 个 页 面 
中 。 在 过 去 ，Web 开发 者 将 使 用 服务 器 端 模板 工具 ， 在 把 页 面 发 到 客户 端 之 前 ， 向 其 中 添 
加 HTML 片段 。AngularJS 模板 将 把 外 部 HIML 包含 到 页 面 中 的 概念 引入 到 了 客户 端 。 尽 
管 AngularJS 的 模板 在 功能 上 类 似 于 服务 器 端 模 板 工具 , 例如 Jade 和 eRuby, 但 是 AngularJS 
模板 提供 了 额外 的 特性 和 性 能 优势 。 

与 服务 器 端 模板 相 比 ， 客 户 端 HIML 最 重要 的 优点 是 能 够 交换 当前 页 面 的 大 部 分 
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HIML， 而 不 必 重 新 加 载 页 面 。 这 将 为 我 们 提供 了 对 UX 更 加 精细 的 控制 ， 从 而 可 以 使 UX 
变 得 更 加 平滑 。 例 如 ， 当 用 户 单 击 链接 时 ， 可 以 展示 一 个 漂亮 的 加 载 界 面 ， 而 不 是 让 用 户 
在 请 求 页 面 加 载 的 过 程 中 ， 在 一 个 不 提供 任何 信息 的 空白 界面 上 等 待 。 

将 使 用 客户 端 模板 为 图 书 分 类 SPA 实现 主 视图 、 查 看 所 有 图 书 的 列表 。 尽 管 在 不 使 用 
模板 的 情况 下 也 可 以 实现 主 视图 ， 但 是 模板 提供 了 对 如 何 泻 染 数据 的 更 广泛 控制 。 


注意 : 

你 可 能 会 好 奇 模板 和 指令 之 间 的 区 别 是 什么 。 指 令 也 提供 了 通过 template 和 
templateURL 选项 包含 HTML 块 的 能 力 。 实 际 上 ， 这 些 template 和 templateURL 选项 将 使 
用 相同 的 模板 框架 (本 章 将 要 学 习 )。 区 别 在 于 : 指令 通常 与 相关 JavaScript 代码 一 起 定义 用 
户 交互 ,而 模板 实际 上 只 是 HTML 字符 串 。 不 过 ， 指 令 可 能 有 一 个 相关 联 的 模板 ， 而 且 模 
板 的 HTML 可 以 使 用 指令 。 在 本 章 ， 将 通过 样 例 学 习 ， 一 个 样 例 将 使 用 指令 而 不 是 普通 的 
模板 ， 而 另 一 个 样 例 则 相反 。 


6.1.1 在 模板 中 使 用 nglnclude 指令 


指令 ngInclude 是 使 用 客户 端 模板 最 简单 的 方式 。 通 过 该 指令 可 以 使 用 指定 模板 的 
HTML 蔡 换 相关 文档 对 象 模型 (DOM) 元 素 的 内 部 HTML。 本 节 稍 后 你 将 会 看 到 ngInclude 最 
大 的 优势 之 一 是 : 被 泻 染 的 模板 被 绑 定 到 了 双向 数据 绑 定 中 ， 所 以 可 以 轻松 地 为 不 同 的 数 
据 片 段 泻 染 不 同 的 模板 。 下 面 是 一 个 简单 的 样 例 ， 它 将 使 用 ngInclude 指 令 和 ngRepeat 指 令 来 
泻 染 图 书 的 列表 ， 并 在 两 个 不 同 的 模板 之 间 切 换 。 可 以 在 样 例 代 码 的 part_i_ng_include.html 
文件 中 找到 该 页 面 : 


<div ng-controller="BooksController"> 
<div ng-repeat="book in books" 
ng-include="book .templateUrl"> 
</div> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="books.js"></script> 
<script type="text/javascript"> 
Var booksModule = angular.module('booksModule’', []); 
booksModule.factory('$books', booksService); 


function BooksController($scope, $books) { 
$scope.books = $books.getAll(); 


for (var i = 0; i < $scope.books.length; ++i) { 
$scope.books [i] .templateUrl = (i % 2 === 0 ? 
'master img left.template.html' : 
'master img right.template.html'); 
$ 
} 
</script> 
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注意 : 

在 本 章 ,模板 文件 将 以 .template.html 为 结尾 ,用 于 将 它们 与 完整 的 HIML 文件 区 分 开 。 
以 区 别 于 完整 HTML 文件 的 方式 命名 模板 文件 是 良好 的 实践 , 这 将 保证 不 会 出 现 混 淆 。 出 
于 相同 的 原因 ， 在 许多 应 用 中 ， 模 板 文件 都 被 存储 在 不 同 于 完整 HTML 文件 的 目录 中 。 


如 之 前 的 样 例 所 示 ，ngInclude 指令 将 接受 一 个 表达 式 作 为 参数 ，AngularJS 将 执行 该 
表达 式 获 得 模板 的 统一 资源 定位 符 (URL)。 在 该 样 例 中 ， 每 本 书 都 被 赋予 了 一 个 
templateURL 属性 ， 然 后 ngInclude 指令 将 计算 它 并 决定 加 载 哪 个 模板 。 模 板 将 使 用 懒 加 载 
的 方式 一 一 就 是 说 ngInclude 不 会 加 载 模板 直到 用 户 请 求 这 样 做 。 而 且 ，ngInclude 将 按照 
URL 缓存 模板 ， 所 以 指定 的 模板 将 只 从 服务 器 加 载 一 次 。 

为 了 正确 地 使 用 ngInclude 指令 ， 要 记 住 几 个 重要 的 细节 。 第 一 ， 因 为 ngInclude 指令 
指令 的 模板 缓存 只 是 一 个 普通 的 JavaScript 对 象 (POJO)， 当 页 面 被 重新 加 载 时 该 缓存 将 被 
销毁 ( 稍 后 在 “$templateCache 服务 ”一 节 中 将 讲解 如 何 清除 模板 缓存 )。 如 果 正 在 标准 页 面 
中 使 用 模板 ， 那 么 模板 必须 每 次 在 页 面 刷 新 时 重新 加 载 。 不 过 ， 因 为 模板 是 通过 HTTP 请 
求 加 载 的 ， 所 以 可 以 使 用 浏览 器 缓存 HTTP 响应 。 

第 二 , 模板 缓存 是 跨 所 有 ngInclude 指令 实例 的 全 局 对 象 。 换 名 话说， 如 果 两 个 完全 不 
同 的 ngInclude 实例 要 泻 染 foo.template.html， 那 么 只 有 一 个 请 求 被 发 送 到 服务 器 ， 而 且 两 
个 ngInclude 指令 的 实例 都 将 接收 到 相同 的 数据 。 

现在 的 问题 是 ， 这 些 .template html 文件 包含 了 什么 内 容 呢 ? 模板 文件 中 包含 了 标准 的 
AngularJS 注入 的 HIML， 而 且 模板 将 按 原 样 被 包含 在 所 有 使 用 ngInclude 指令 包含 模板 的 
元 素 中 。 下 面 是 第 一 个 模板 master_img lefttemplate .html 的 内 容 : 


<div class="book-preview"> 
<div class="book-preview-image"> 
<img ng-src="{{ book.image }}"> 
</div> 
<div class="book-preview-text"> 
<h3> 
{{ book.title }} 
</h3> 
<h4> 
By {{ book.author }} 
</h4> 
<em> 
{{ book.preview | limitTo:140 }} 
</em> 
</div> 
<div style="clear: both"> 
</div> 
</div> 


i 
广电 : 


因为 ngInclude 指令 使 用 HITP 请 求 加 载 模板 ， 所 以 可 以 使 用 服务 器 端 模板 语言 (例如 
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Jade 和 eRuby) 编 写 模板 。 唯 一 的 要 求 是 HTTP 响应 要 包含 HTML， 所 以 可 以 使 用 Jade 编 
写 自 己 的 模板 ， 只 要 服务 器 在 发 送 响应 给 客户 端 之 前 能 够 将 Jade 解析 成 HIML 即 可 。 


如 你 所 见 ，master img lefttemplate html 文 件 包含 了 相当 标准 的 注入 AngularJS 的 
HTML。 你 可 能 好 奇 之 前 表达 式 中 引用 的 boo 变 量 是 什么 。 该 模板 中 的 book 变 量 是 
part i ng include.html 文 件 中 定义 在 ngRepeat 里 的 book 变 量 。 尽 管 能 够 包含 使 用 了 外 部 变量 
的 模板 是 非常 强大 的 ， 但 是 要 小 心 ! 没有 什么 可 以 阻止 你 在 一 个 不 含 book 变 量 的 作用 域 中 
添加 master_img_left.template.html 模 板 , 也 可 以 在 一 个 包含 了 book 变 量 但 没有 图 片 的 作用 域 
中 添加 该 模板 。 请 保证 模板 尽 可 能 减少 对 外 部 变量 的 使 用 ， 从 而 最 大 化 它们 的 可 重用 性 ， 
并 最 小 化 了 解 它们 的 障碍 。 

part i ng_include html 文件 中 还 使 用 了 另 一 个 模板 : master_ img_right.template.html 模 
板 。 下 面 是 该 模板 的 内 容 : 

<div class="book-preview"> 

<div class="book-preview-text"> 
<h3> 
{{ book.title }} 
</h3> 
<h4> 
By {{ book.author }} 
</h4> 
<em> 
{{ book.preview | limitTo:140 }} 
</em> 
</div> 
<div class="book-preview-image"> 
<img ng-src="{{ book.image }}"> 
</div> 
<div style="clear: both"> 
</div> 
</div> 


该 模板 和 master_img_left.template.html 模板 之 间 的 区 别 是 : 图 书 图 片 在 标题 的 右 侧 ， 
而 不 是 在 左 侧 。 在 AngularJS 中 有 众多 其 他 方式 可 以 实现 这 个 效果 ; 不过， 这 些 通常 涉及 
HTML 中 的 条 件 罗 辑 。AngularJS 新 手 通常 会 发 现在 HTML 中 包含 逻辑 的 概念 是 如 此 令 人 
激动 ， 所 以 他 们 往往 会 走 极端 ， 将 HIML 转换 成 意大利 面条 一 样 的 代码 。 模 板 是 一 个 当 
HTML 的 复杂 性 超出 控制 时 简化 注入 AngularJS 的 HTML 的 工具 : 如 果 有 一 个 包含 了 10 
个 子 元 素 的 div 元 素 , 而 且 它们 都 有 ngClass 和 ngIf， 那 么 我 们 应 该 抽象 出 两 个 或 多 个 模板 
之 后 的 复杂 性 。 


6.1.2 nglnclude 和 性 能 


与 传统 的 服务 器 端 模板 相 比 , AngularJS 客户 端 模板 提供 了 两 个 性 能 优势 .第 一 , HTML 
模板 只 需要 加 载 一 次 。 因 此 ， 如 果 页 面 含有 大 量 重 复 的 HIML， 那 么 可 以 通过 使 用 模板 加 
载 HTML 的 重复 块 来 节省 珍贵 的 带宽 。 第 二 个 有 点 更 加 微妙 。 因 为 模板 是 懒 加 载 的 ,或 者 
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直到 ngInclude 指令 需要 它 才 加 载 , 所 以 模板 HTML 的 加 载 将 被 推迟 到 主页 面 完 成 加 载 时 。 
HTML 的 这 种 懒 加 载 对 于 显示 通过 $http 调用 加 载 内 容 的 模板 来 说 尤其 有 用 , 因为 直到 S$http 
调用 返回 之 前 不 会 显示 任何 数据 。 

当然 ， 在 提 到 性 能 时 ， 懒 加 载 就 是 一 把 双 刃 剑 。 在 某 些 情况 下 ， 懒 加 载 可 以 带 来 巨大 
的 好 处 。 不过, 演示 懒 加 载 性 能 不 佳 的 经 典 用 例 是 Facebook 样式 的 通知 窗口 。 在 Facebook 
中 ， 无 论 何 时 用 户 访问 他 们 的 主页 ， 都 可 以 单 击 按钮 查看 最 近 的 通知 。 在 AngularJS 中 实 
现 这 样 一 个 组 件 ， 可 以 选择 为 每 种 类 型 的 通知 实现 一 个 不 同 的 模板 (例如 ,我 们 可 能 希望 泻 
染 一 个 不 同 于 墙 面 评 论 的 图 片 通知 )。 另 外 ， 当 用 户 单 击 Show Notification 按钮 时 ， 我 们 可 
能 希望 使 用 HTTP 请 求 从 服务 器 加 载 通知 。 这 意味 着 ， 在 最 糟糕 的 情况 下 ， 我 们 必须 发 起 
6 次 HTTP 请 求 加 载 5 个 通知 : 一 个 用 于 加 载 通知 数据 ，5 个 用 于 加 载 不 同 的 模板 。 换 句 
话说 ， 通 过 这 种 原生 的 方式 ， 通 知 将 比 我 们 所 期 望 的 更 慢 出 现 。 幸 亏 ， 如 果 有 类 似 的 情况 ， 
也 还 可 以 继续 使 用 ngInclude。 下 一 节 将 学 习 加 载 模板 的 另 一 种 方式 ， 它 改善 了 这 个 问题 。 

为 了 演示 懒 加 载 是 如 何 工 作 的 , 在 加 载 http://localhost:8080/part i_ng_ include.html 页 面 
时 ,请 查看 Chrome Developer Tools 中 的 Network 标签 页 .时 间 轴 显示 :模板 将 在 页 面 HIML 
完成 加 载 时 加 载 ， 然 后 再 加 载 被 包含 在 模板 中 的 图 片 。 


6.1.3 ”使 用 脚本 标记 包含 模板 


指令 ngInclude 加 载 模板 的 能 力 是 十 分 强大 的 ， 但 并 不 是 对 于 所 有 的 应 用 来 说 都 是 如 
此 。 当 懒 加 载 不 是 正确 的 选择 时 ，AngularJS 允许 将 模板 内 嵌 到 一 个 标准 的 HIML script 标 
记 中 。 这 将 允许 我 们 避免 使 用 一 个 单独 的 HITP 请 求 加 载 特定 的 模板 ， 但 是 它 要 求 将 模板 
代码 内 嵌 在 页 面 中 。 下 面 演示 了 实际 中 是 如 何 使 用 script 标记 加 载 模板 的 : 


<div ng-controller="BooksController"> 
<div ng-repeat="book in books" 
ng-include="book.templateUrl"> 
</div> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="books.js"></script> 
<script type="text/javascript"> 
Var booksModule = angular.module('booksModule’', []); 
booksModule.factory('$books', booksService); 


function BooksController($scope, $books) { 
$scope.books = $books.getAll (); 


for (var i = 0; i < $scope.books.length; ++i) { 
$scope.books[i].templateUrl = (Is 2 === 0 ? 
'master img left.template.html' : 
'master img right.template.html'); 
} 
和 
/acript> 
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<script type="text/ng-template" id="master img left.template.html"> 


<div class="book-preview"> 
<div class="book-preview-image"> 
<img ng-src="{{ book.image }}"> 
</div> 
<div class="book-preview-text"> 
<h3> 
{{ book.title }} 
</h3> 
<h4> 
By {{ book.author }} 
</h4> 
<em> 
{{ book.preview | limitTo:140 }} 
</em> 
</div> 
<div style="clear: both"> 
</div> 
</div> 
</script> 


<script type="text/ng-template" id="master img right.template.html"> 


<div class="book-preview"> 
<div class="book-preview-text"> 
<h3> 
{{ book.title }} 
</h3> 
<h4> 
By {{ book.author }} 
</h4> 
<em> 
{{ book.preview | limitTo:140 }} 
</em> 
</div> 
<div class="book-preview-image"> 
<img ng-src="{{ book.image }}"> 
</div> 
<div style="clear: both"> 
</div> 
</div> 
</script> 


在 之 前 的 样 例 中 ，master_img_left.template.html 和 master_img_right.template.html 都 被 作 
为 HTML 页 面 的 一 部 分 加 载 。 如果 查看 ChromeDeveloper Tools Network 标 签 页 的 话 , 你 会 注 
意 到 ngInclude 指 令 并 未 发 起 HTTP 请 求 加 载 任何 一 个 模板 文件 。 这 是 因为 StemplateCache 服 


务 将 找到 所 有 使 用 了 type=text/ng-template 的 script 标 记 并 存储 它们 的 内 容 ， 
讲解 。 然 后 每 个 模板 都 将 被 关联 到 它 的 id 特 性 ( 它 的 作用 与 懒 加 载 模板 


同 )， 接 着 ngInclude 就 可 以 通过 id 引 用 它们 。 
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注意 , 真正 的 HTML 结构 并 未 改变 。 模板 最 大 的 优势 之 一 就 是 清晰 地 分 离 了 考虑 事项 。 
页 面 或 模板 本 身 的 结构 都 不 必 根 据 模板 加 载 方式 而 改变 。 这 非常 方便 ， 因 为 将 在 下 一 节 中 
看 到 ， 把 模板 加 载 到 模板 缓存 中 有 许多 其 他 方式 。 


6.1.4 S$templateCache 服务 


在 完成 了 ngInclude 一 节 的 学 习 之 后 , 我 们 已 经 看 到 了 大 量 关 于 AngularJS 模板 缓存 的 
内 容 。 实 际 上 ， 除 了 知道 模板 缓存 的 存在 之 外 ， 我 们 很 少 与 它 进行 交互 ， 但 是 有 时 可 能 需 
要 清空 缓存 或 者 手动 地 向 其 中 添加 模板 。 出 于 这 个 原因 ，AngularJS 以 $templateCache 服务 
的 形式 为 模板 缓存 提供 了 一 个 接口 。 通过 标准 的 依赖 注入 器 可 以 使 用 $templateCache 服务 ， 
所 以 可 以 在 任何 指令 、 控 制 器 或 者 服务 中 使 用 它 。 

可 能 $templateCache 服务 最 常见 的 用 例 就 是 在 页 面 完 成 加 载 之 后 通过 HTTP 请 求 加 载 
模板 。 记 住 到 目前 为 止 加 载 模板 的 方法 有 : 通过 在 第 一 次 使 用 模板 时 懒 加 载 它 、 使 用 script 
标记 将 模板 包含 在 HTML 中。 通过 使 用 StemplateCache 服务 ， 我 们 不 用 再 受 限 于 这 两 种 方 
式 ; 实际 上 ， 可 以 更 细 粒 度 地 控制 何 时 加 载 模板 。 下 面 这 个 简单 的 样 例 将 在 控制 器 初始 化 
时 使 用 $http 和 $templateCache 服务 加 载 master_img lefttemplate .html 和 master_img right. 
template .html 模板 。 这 种 方式 实现 了 两 全 其 美的 性 能 : 可 以 将 模板 加 载 延 迟到 主页 面 完成 
演 染 之 后 ， 但 是 模板 可 以 在 用 户 能 够 切换 视图 时 完成 加 载 。 该 代码 在 本 章 样 例 代码 的 
part_i template_cache.html 文件 中 : 


<div ng-controller="BooksController"> 
<div ng-repeat="book in books" 
ng-include="book.templateUrl"> 
</div> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="books.js"></script> 
<script type="text/javascript"> 
Var booksModule = angular.module('booksModule’', []); 
booksModule.factory('$books', booksService); 


function BooksController ($scope, $books, S$templateCache, $http) { 
Var templates = [ 
'master img left.template.html', 
'master img right.template.html' 
]; 


$scope.loadBooks = function() { 
$scope.books = $books.getAll(); 


for (var i = 0; i < $scope.books.length; ++i) { 
$scope.books[i] .templateUrl = templates[i % 2]; 
} 
}; 
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Var done = 0; 
angular .forEach (templates, function(templateUrl1) { 
$http.get (templateUr1) .success (function(data) { 
$templateCache.put (templateUrl1l, data); 
if (++done === templates.length) { 
$scope.loadBooks (); 


]}) 7 
]}) 
} 
</script> 


之 前 代码 中 使 用 的 $templateCache.put 函 数 允 许 将 一 个 模板 插入 到 模板 缓存 中 。 
$templateCache 服 务 还 公开 了 $templateCache.get 函 数 (通过 它 可 以 根据 指定 的 ID 获得 相关 的 
模板 ) 以 及 S$templateCacheremoveAll 函数 (用 于 从 缓存 中 删除 所 有 模板 ) 。 
S$templateCache.removeAll 是 保证 ngInclude 指 令 从 服务 器 重新 加 载 模板 的 标准 方式 。 
S$templateCache 没 有 显 式 地 从 缓存 中 移 除 单个 模板 的 函数 ， 但 是 $templateCache.put(id, 
undefined) 可 以 使 用 指定 的 ID 删除 相关 模板 。 

关于 ngInclude 和 模板 缓存 最 后 一 个 需要 记 住 的 细节 是 : 如 果 需 要 ngInclude 指 令 泻 染 一 
个 不 在 缓存 中 的 模板 ， 那 么 它 将 尝试 使 用 HTTP 请 求 加 载 模板 ， 并 放 回 到 缓存 中。 不 过 ， 
ngInclude 指 令 被 绑 定 到 了 AngularJS 的 $digest 循 环 ， 所 以 它 不 会 检查 模板 缓存 或 者 发 起 任何 
HTTP 请 求 ， 除 非 它 正在 监视 的 表达 式 的 值 发 生 了 改变 。 对 于 图 书目 录 的 主 视图 来 说 ， 为 了 
强制 ngInclude 指 令 重新 加 载 master_ img left.template.html 和 master img right.template.html 
模板 ， 必 须 调用 $templateCache removeAll 函 数 ， 或 者 改变 每 个 booktemplateUrl 的 值 触发 
ngInclude 指 令 的 监视 器 。 


6.1.5 下 一 步 : 模板 和 数据 绑 定 


你 可 能 已 经 注意 到 了 ngInclude 指令 将 计算 表达 式 ， 并 决定 演 染 哪个 模板 。 实 际 上 ， 
ngInclude 指令 被 绑 定 到 了 双向 数据 绑 定 中 。 在 图 书 的 主 列表 中 ， 如果 某 本 书 的 templateUrl 
成 员 发 生 改 变 ， 那 么 此 书 的 div 元 素 将 使 用 一 个 不 同 的 模板 进行 泻 染 。 可 以 在 本 章 样 例 代 
码 的 part_i template_data_binding.html 文件 中 看 到 其 工作 原理 : 


<div ng-controller="BooksController"> 
<select ng-model="currentOption" 
ng-options="key for (key, value) in options" 
ng-change="currentOption()"> 
</select> 
<div ng-repeat="book in books" 
ng-include="book.templateUrl"> 
</div> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="books.js"></script> 
<script type="text/javascript"> 
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Var booksModule = angular.module('booksModule', []); 
booksModule.factory('$books', booksService); 


function BooksController ($scope, $books) { 
$scope.books = $books.getAll(); 


$scope.setAlternatingTemplates = function() { 
for (var i = 0; i < $scope.books.length; ++i) { 
$scope.books[i] .templateUrl (i % 2 === 0 ? 
"master_ img left.template.html' : 
"master_ img right.template.html'); 


} 
] 7 


$scope.setAllLeft = function() { 
for (var i = 0; i < $scope.books.length; ++i) { 


$scope.books[i] .templateUrl = 'master img left.template html'; 


} 
] 7 


$scope.setAllRight = function() { 
for (var i = 0; i < $scope.books.length; ++i) { 


$scope.books[i] .templateUrl = 'master img right.template.html'; 


} 
] 7 


$scope.options = { 
'Alternating': $scope.setAlternatingTemplates, 
'All Left': $scope.setAllLeft, 
'All Right': $scope.setAllRight 
}; 
$scope.currentOoption = $scope.options['Alternating']; 
$scope.setAlternatingTemplates (); 
+ 
</script> 


该 页 面 有 一 个 下 拉 列 表 ， 人 允许 设置 使 用 哪 种 方式 演 染 图 书 : 


只 使 用 


master_img_left.template.html 模板 、 只 使 用 master_img_right.template.html 模板 或 者 在 两 者 
之 间 交 替 。 由 于 AngularJS 的 数据 绑 定 ， 除 了 设置 每 本 书 的 templateUrl 属性 ， 我 们 不 需要 


做 任何 额外 的 事情 ngInclude 将 负责 完成 剩 下 的 工作 。 


基于 用 户 的 行为 动态 地 改变 模板 的 最 常见 应 用 就 是 SPA， 页 面 的 所 有 内 容 都 是 一 个 
以 被 换 出 的 模板 。 这 正 是 本 章 第 3 部 分 将 要 讲解 的 内 容 。 不 过 ， 在 深入 学 习 路 由 和 RE 
前 ， 需 要 学 习 如 何 追踪 URL 中 用 户 正 在 使 用 哪个 视图 。 使 URL 如 此 方便 的 部 分 原因 是 
以 复制 /粘贴 或 者 收藏 ) 指 定 的 URL， 并 在 稍 后 返回 到 该 页 面 。 遗 憾 的 是 ， 当 用 户 停留 在 相 

同 的 页 面 中 只 切换 AngularJS 模板 时 ，URL 会 保持 不 变 ， 而 且 用 户 无 法 只 是 通过 粘贴 URL 
返回 到 原来 的 页 面 。 在 下 一 节 ， 将 学 习 如 何 使 用 $location 服务 改善 这 个 问题 ， 这 是 第 3 部 


是 可 
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分 将 使 用 的 AngularJS 路 由 代码 。$location 服务 提供 了 在 页 面 URL 中 追踪 JavaScript 状态 
的 简洁 方式 ， 不 必 触 发 页 面 重 载 。 


6.2 第 2 部 分 :$location 服务 


与 AngularJS 的 模板 框架 如 何 工作 非常 相似 (允许 轻松 地 转换 大 型 HTML 块 ), $location 
服务 提供 了 一 个 方便 的 接口 ， 用 于 读 取 和 修改 当前 URL， 而 不 必 重 载 页 面 。 在 JavaScript 
中 修改 当前 URL 最 常见 的 原因 是 深度 链接 (deep linking): 在 URL 编码 页 面 状态 ， 例 如 复 
选 框 的 状态 或 者 窗口 的 当前 滚动 位 置 。 你 可 能 已 经 猜 到 了 ， 深 度 链接 对 于 SPA 来 说 是 极其 
重要 的 。 不 过 ， 因 为 关于 URL 哪个 部 分 改变 时 不 必 重 新 加 载 页 面 有 着 严格 的 规则 ， 所 以 
$location 服务 有 几 个 要 点 需要 注意 。 


注意 : 
与 $location 服务 有 关 的 常见 混淆 来 源 是 无 法 使 用 $location 强制 页 面 重新 加 载 。 不 能 使 
用 $location 服务 将 用 户 重 定向 至 一 个 全 新 的 页 面 。 


6.2.1 URL 中 包含 的 信息 


URL 是 一 个 可 以 输入 到 浏览 器 中 ， 用 于 加 载 指 定 文件 的 字符 串 。 一 个 常见 的 样 例 是 
http://www.google.com， 它 将 被 解析 为 Google 主 页 的 HTML。 不 过 ，URL 可 以 比 这 个 简单 的 
样 例 复杂 上 许多 ， 出 于 本 节 的 目的 ， 需 要 熟悉 URL 的 不 同 组 件 。 

与 之 前 的 普通 样 例 相 比 ,一 个 更 加 有 趣 的 URL 可 能 会 是 这 样 的 : http://www.google.com/ 
foo?bar=baz#qux。 需 要 熟悉 URL 的 3 个 部 分 是 : 路 径 /foo、 查 询 字 符 串 # ?bar=baz # 和 哈 希 
# qux。 路 径 和 查询 字符 串 将 告诉 服务 器 我 们 正在 寻找 的 特定 资源 。 改 变 路 径 或 者 查询 字符 
串 将 在 现代 浏览 器 中 触发 页 面 重新 加 载 。 不 过 ， 浏 览 器 不 会 将 哈 希 部 分 发 送 到 服务 器 ， 因 
此 ， 可 以 修改 哈 希 组 件 ， 而 不 必 触 发 页 面 重新 加 载 。 哈 希 部 分 通常 用 于 深度 链接 功能 。 

浏览 器 通常 将 ?的 第 一 个 实例 看 成 查询 字符 串 的 开头 ， 将 # 的 第 一 个 实例 看 作 是 哈 希 部 
分 的 开头 。 这 意味 着 哈 希 部 分 可 以 包含 应 用 所 需要 的 任何 内 容 。 尤 其 是 ， 在 本 节 稍 后 可 以 
看 到 ，AngularJS 的 $location 服务 提供 了 一 个 接口 ， 用 于 构建 像 http://www.google.com/ 
##/foo?bar=baz 这 样 的 URL。 注 意 /foo?bar=baz 在 哈 希 部 分 中 ! 


注意 : 

IETF RFC-3986 规范 (URL 格式 的 明确 规范 ) 并 未 显 式 地 指定 查询 字符 事 的 格式 。 既 定 
的 规范 是 查询 字符 串 应 该 是 一 个 由 及 分 隔 的 键 / 值 对 列表 ， 但 这 个 不 是 必需 的 。 从 技术 角度 
看 ， 查 询 字符 串 可 以 是 任何 所 需 的 内 容 。 


6.2.2 介绍 $location 


S$location 服务 是 AngularJS 推荐 用 于 操作 URL 中 哈 希 部 分 的 方法 。 尤 其 是 ，$location 
公开 了 4 个 重要 的 函数 : urlO0、Ppath0、searchO0 和 hash()。 你 将 看 到 ， 由 于 既定 的 URL 命 
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名 法 ， 这 些 函 数 的 名 称 有 点 混淆 。 例 如 ，path() 函 数 并 不 会 修改 URL 真正 的 路 径 部 分 。 
S$location 被 设计 用 于 SPA 路 由 ， 所 以 这 些 函数 被 设计 为 操作 URL 的 哈 希 部 分 。 例 如 ， 
S$location.path('foo") 将 把 用 户 导 航 至 /#/foo( 注 意 # 标 志 着 哈 希 部 分 的 起 始 )， 而 不 是 /foo， 而 且 
不 会 引起 页 面 重新 加 载 。 换 句 话说 ，$location 将 与 URL 哈 希 部 分 中 定义 的 伪 URL 交互 。 
例如 ， 假 设 用 户 正在 访问 URL http://google.com/foo?bar=baz#qux 。 如 果 在 用 户 访问 这 
个 URL 时 执行 下 面 的 指令 ， 那 么 浏览 器 的 地 址 将 会 显示 出 如 下 内 容 : 
// 之 前 : http://google.com/foo?bar=baz#qux 


$location.url('/path/to?query=1°'); 
// 之 后 : http://google.com/foo?bar=baz #/path/to?query=1 


// 之 前 : http://google.com/foo?bar=baz#qux 
$location.path('/path/to'); 
// 之 后 : http://google.com/foo?bar=baz #/path/to 


// 之 前 : http://google.com/foo?bar=baz#qux 
$location.search('query', '1'); 
// 之 后 : http://google.com/foo?bar=baz#/qux?query=1 


// 之 前 : http://google.com/foo?bar=baz#qux 

$location.hash('fi'); 

// 之 后 : http://google.com/foo?bar=baz #/qux#fi 

如 你 所 见 ，$location 服务 将 完全 利用 URL 的 哈 希 部 分 可 以 是 任意 字符 串 的 这 个 事实 ， 
并 在 哈 希 部 分 提供 一 个 易于 操作 的 伪 URL。 出 于 本 章 的 目的 ， 为 了 避免 与 浏览 器 地 址 栏 中 
实际 URL 产生 混淆 ， 哈 希 部 分 的 URL 将 被 引用 为 哈 希 伪 URL。 哈 希 伪 URL 的 每 个 部 分 
将 通过 它们 的 函数 名 进行 引用 。 例 如 ， 为 了 避免 在 地 址 栏 URL 搜索 部 分 和 哈 希 伪 URL 的 
搜索 部 分 之 间 引 起 混淆 ， 哈 希 伪 URL 的 搜索 部 分 将 被 引用 为 $location.search。 

关于 这 4 个 函数 与 $lcoation 服务 相关 的 一 个 重要 细节 是 : 它们 都 既是 设置 器 也 是 读 取 
器 。 在 不 使 用 参数 的 情况 下 调用 urlO、path0) 或 者 hashO 将 会 分 别 返回 哈 希 伪 URL 的 当前 
值 、 伪 路 径 或 者 伪 哈 希 。 类 似 地 ， 不 使 用 参数 调用 search() 函 数 将 返回 一 个 伪 URL 搜索 部 
分 的 JavaScript 对 象 表示 。 例 如 : 


// URL: http://go0gle.com/foo?bar=baz#qux 
$location.url(); // => '/qux' 


// URL: http://go0gle.com/foo?bar=baz#qux 
$location.path(); // => '/' 


// URL: http://goo0gle.com/#/foo/bar?baz=qux 
$location.search(); // => '{ "baz": "qux" }" 


// URL: http://google.com/#/foo/bar#baz 
$location.hash(); // => 'baz' 
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6.2.3 使 用 $location 追踪 页 面 状态 


修改 URL 哈 希 部 分 最 常见 的 用 例 是 : 使 用 户 可 以 保存 一 些 页 面 内 的 状态 ， 例 如 
JavaScript 变 量 或 者 用 户 的 滚动 位 置 。$location 服 务 允许 对 URIL 的 哈 希 部 分 做 更 多 的 操作 。 
在 本 节 ， 将 使 用 $location 服 务 允 许 用 户 在 图 书 预览 中 高 亮 显示 文本 ， 并 在 页 面 的 URL 中 追 
踪 它 们 高 亮 显示 了 什么 。 这 将 使 用 户 可 以 收藏 最 喜爱 的 段落 或 者 在 社交 媒体 中 分 享有 号 召 
力 的 名 言 。 

在 本 节 ， 将 编写 图 书目 录 SPA 的 细节 视图 一 一 也 就 是 显示 一 本 书 细节 信息 的 视图 。 为 
了 简单 起 见 并 避免 使 用 客户 端 路 由 ,该 页 面 将 硬 编码 所 显示 的 图 书 , 在 本 例 中 是 VictorHugo 
的 小 说 《Les Miserables》。 更 有 趣 的 是 ， 该 页 面 允许 用 户 通过 单 击 高 亮 显示 图 书 预览 中 的 
某 块 文本 的 方式 ， 在 页 面 的 URL 中 存储 高 亮 显示 的 位 置 。 例 如 ， 在 阅读 预览 时 ， 你 的 用 
户 可 能 被 Hugo 的 格言 “That which is said of men often occupies as important a place in their 
lives, and above all in their destinies, as that which they do” 所 打动 。 当 用 户 选 择 该 文本 时 ， 
下 面 的 代码 将 高 亮 显示 指定 的 文本 ,并 把 页 面 的 URL 改 为 part_ii_highlight.html#?highlight= 
that962520which9%2520is9%62520said...， 该 代码 可 在 本 章 样 例 代码 的 part i highlighthtml 文 
件 中 找到 ， 


<div ng-controller="BookDetailController"> 
<div style="float:left; width: 300px; margin: 25px"> 
<img ng-src="http://{{ book.image }}" style="width: 300px"> 
</div> 
<div style="float: left; width: 600px;"> 
<h1> 
{{ book.title }} 
</h1l> 
<h3> 
By: {{ book.author }} 
</h3> 
<p ng-click="getSelection()" 
ng-bind-html-unsafe="book.preview | highlight:selectedText"> 
</p> 
</div> 
<div style="clear: both"></div> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="books.js"></script> 
<script type="text/javascript"> 
Var booksModule = angular.module('booksModule', []); 
booksModule.factory('$books', booksService); 


function BookDetailController ($scope, $books, $location) { 
$scope.book = $books.getById(1); // Les Miserables 
$scope.selectedText = $location.search()['highlight'] ? 
decodeURIComponent ($location.search()['highlight']) 
null; 
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$scope.getSselection = function() { 
var selected = window.getSelection() .toString() : 
$location.search('highlight', encodeURIComponent (selected)); 
$scope.selectedText = selected; 
LE 
» 


booksModule.filter('highlight', function() { 
return function(input, highlight) { 
if (!highlight) { 
return input; 
} 
return input.replace (highlight, 
'<span class="highlight">' + highlight + '</span>'); 
} 
1D; 


booksModule.directive('ngBindHtmlUnsafe', function() { 
return function(scope, element, attrs) { 
scope.$watch(attrs.ngBindHtmlUnsafe, function(v) { 
element .html (v); 
Hs 
} 
]) 7 
</script> 


<style rel="stylesheet"> 
.highlight { 
background-color: yellow; 


} 
</style> 


注意 : 
你 可 能 已 经 注意 到 , 在 本 样 例 中 , 代码 决定 高 亮 显示 什么 内 容 时 只 搜索 指定 的 字符 串 ， 
而 不 是 真正 地 在 文本 中 存储 格言 的 内 容 。 这 种 方式 非常 有 限 ， 而 且 会 产生 许多 糟糕 的 行为 
尝试 高 亮 显示 之 前 样 例 中 BookDetailController 包含 的 单词 )。 以 这 种 方式 实现 一 个 真正 的 
高 亮 显示 系统 是 一 个 糟糕 的 决定 。 不 过 ， 实 现 这 样 一 个 系统 的 细节 将 为 本 样 例 增加 不 必要 
的 复杂 性 ， 从 而 降低 它 作 为 学 习 $location 服务 的 工具 的 有 效 性 。 


之 前 的 代码 演示 了 与 $location 服务 交互 的 基本 设计 模式 。 通 常 ， 使 用 $location 服务 在 
ULR 中 追踪 JavaScript 状态 时 ， 在 页 面 加 载 之 后 (也 就 是 控制 器 初始 化 时 )， 我 们 首先 会 立 
即 从 URL 中 加 载 数据 。 在 本 样 例 中 ，$scope.selectedText = $location.searchO['highlight] 展 示 
了 这 个 步 又。 该 设计 模式 的 第 二 个 部 分 是 在 变量 改变 时 更 新 URL, 所 以 URL 将 与 JavaScript 
状态 保持 一 致 。 在 本 样 例 中 ， 该 步骤 是 由 Slocation.search('highlight, 
encodeURIComponent(selected)): 这 行 代 码 表示 的 。 
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通常 , 为 了 存储 JavaScript 数据 ， 使 用 $location.search 函数 是 正确 的 方式 ， 因 为 它 提供 
了 修改 命名 特性 的 能 力 。 例 如 ， 在 之 前 的 代码 中 ， 我 们 只 存储 了 一 个 highlight 特性 。 添 加 
其 他 特性 用 于 存储 其 他 JavaScript 状态 将 是 非常 直观 的 .不 过 , $location.url 、$location hash、 
$location path 只 人 允许 直接 修改 单个 字符 串 ， 所 以 如 果 在 其 中 某 个 部 分 存储 了 selectedText 
变量 , 那么 将 被 复杂 的 工程 问题 所 阻碍 (如 果 需 要 在 URL 中 添加 额外 的 JavaScript 状态 的 话 )。 

再 次 ， 值 得 注意 的 是 $location.search 函数 无 法 改变 URL 中 真正 的 查询 部 分 (搜索 部 分 
是 另 一 个 常用 于 表示 URL 查询 部 分 的 术语 )。 它 将 修改 哈 希 伪 URL 的 查询 部 分 。 因 此 ,使 
用 $location.search 函数 对 ULR 做 出 的 改动 不 会 影响 服务 器 交互 ; 不 过 , 任何 解析 查询 字符 
串 的 非 AngularJS 函数 不 会 看 到 这 个 改动 。 


6.2.4 下 一 步 : 路 由 和 SPA 


在 第 2 部 分 的 学 习 中 ， 我 们 主要 通过 $location 服务 使 用 $location.search 函数 以 最 小 的 
容量 追踪 页 面 状 态 。 我 们 尚未 真正 使 用 url0、path0 或 者 hash0 函 数 。 原 因 是 : $location.search 
函数 非常 适 于 存储 一 般 的 JavaScript 状态 ， 因 为 它 提供 了 操作 键 值 对 的 能 力 。 相 反 ，url0、 
path() 或 者 hash() 将 操作 哈 希 伪 URL 的 整个 部 分 。 这 些 函数 被 设计 用 于 不 同 的 目的 : 为 SPA 
提供 一 个 与 URL 类 似 的 接口 。 如 果 对 SPA 不 感 兴趣 ， 可 能 就 不 需要 使 用 url0、path0 或 者 
hashO 函 数 。 然 而 ， 理 解 这 些 函 数 是 理解 客户 端 路 由 和 SPA 如 何 工作 的 关键 ， 所 以 在 第 3 
部 分 中 请 记 住 这 一 点 。 


6.3 第 3 部 分 : 路 由 


现在 我 们 已 经 学 习 了 模板 是 如 何 工作 的 ， 以 及 $lcoation 服务 是 如 何 操作 哈 希 伪 URL 
的 基础 知识 , 接 下 来 将 要 学 习 的 是 如 何 结合 这 两 个 概念 , 为 图 书目 录 SPA 实现 客户 端 路 由 。 

从 高 级 别 讲 ，Web 开发 中 的 术语 “路 由 ”意味 着 将 URL 的 路 径 部 分 映射 到 这 个 特定 
路 由 的 处 理 器 。 在 AngluarJS 的 上 下 文中 ， 路 由 是 由 哈 希 伪 URL 的 路 径 部 分 所 定义 的 。 
AngularJS 有 一 个 称 为 SrouteProvider 的 提供 者 ， 通 过 它 可 以 使 用 声明 的 方式 定义 一 个 从 哈 
希 伪 路 径 到 处 理 器 的 映射 。 在 AngularJS 中 ,路 由 处 理 器 通常 是 一 个 定义 了 模板 URL( 应 该 
被 泻 染 的 ) 和 模板 控制 器 的 对 象 。 


注意 : 

通常 ,在 服务 器 端 路 由 框架 中 ,路 由 是 通过 结合 路 径 和 HTTP 动词 (GET、POST、 PUT 
或 者 DELETE) 定 义 的。 不 过 ， 因 为 AngularJS 将 在 客户 端 处 理 路 由 ， 不 接收 请 求 ， 所 以 使 
用 HTTP 动词 组 件 并 不 合理 。 这 就 是 为 什么 AngularJS 路 由 只 使 用 ( 哈 希 伪 URL) 路 径 的 原 
因 。 如 果 习 惯 于 使 用 服务 器 端 路 由 框架 (例如 Ruby on Rails 或 者 Express)， 那么 请 注意 这 个 
区 别 。 


AngularJS 的 路 由 框架 并 未 包含 在 核心 angularjs 文件 中 ; 相反 ， 它 被 打包 为 一 个 单独 
的 文件 angular-routes.js。 可 以 从 http://code.angularjs.org 为 指定 版 本 的 AngularJS 下 载 对 应 
的 angular-routes.js 文件 。 为 了 方便 使 用 ， 对 应 于 AngularJS 1.2.16 版 本 的 angular-routes.jjs 
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文件 已 经 被 打包 到 了 本 章 的 样 例 代码 中 。 该 文件 包含 了 一 个 称 为 ngRoute 的 模块 ， 其 中 包 
含 了 构建 SPA 所 需 的 所 有 服务 和 指令 。 

在 底层 , ngRoute 模块 将 管理 $location 服务 和 被 泻 染 视图 之 间 的 交互 一 一 也 就 是 说 , 当 
$location.path() 使 用 了 一 个 特定 值 时 ，ngRoute 模块 将 泻 染 为 该 特殊 值 指定 的 模板 。 这 个 功 
能 组 成 了 基本 SPA 的 核心 。AngularJS 中 在 SPA 背后 的 一 般 概 念 是 : 链接 应 该 修改 URL 
的 哈 希 部 分 ， 而 不 是 链接 到 一 个 新 的 页 面 。ngRoute 模块 然后 将 负责 与 $location 服务 进行 
交互 ， 保 证 基于 $location.path() 的 值 泻 染 出 了 正确 的 视图 。 

SPA 模式 拥有 众多 优点 。 除 了 提供 对 UX 更 加 精细 的 控制 之 外 ，SPA 还 提供 了 客户 端 
和 服务 器 端 之 间 清 晰 的 分 离 ， 以 及 数据 和 显示 之 间 的 清晰 分 离 。 在 SPA 背后 的 服务 器 不 需 
要 处 理 模板 和 路 由 ， 只 需要 提供 另 一 个 REST API 和 代表 AngularJS 模板 的 静态 HTML。 
因此 客户 端 JavaScript 和 HIML 可 以 完全 负责 如 何 显示 数据 ， 服 务 器 则 可 以 专注 于 提供 操 
作 数 据 的 API。 另 外 ， 因 为 AngularJS 模板 是 静态 的 HIML， 所 以 它们 可 以 被 浏览 器 所 组 
存 ， 从 而 减少 带宽 使 用 和 获得 更 好 的 性 能 。 在 构建 SPA 时 可 以 详细 地 浏览 这 些 优 点 。 

SPA 最 大 的 限制 就 是 搜索 引擎 优化 。 像 Google 这 样 的 搜索 引擎 将 使 用 称 为 候 虫 的 程序 
浏览 我 们 的 网 站 ， 并 把 页 面 的 相关 信息 报告 给 搜索 引擎 。 不 过 ， 这 些 怜 虫 只 被 设计 为 分 析 
静态 HIML; 它们 不 会 真正 地 执行 JavaScript。 这 意味 着 我 们 的 SPA 无 法 被 Google 所 怜 取 ! 
幸亏 在 本 章 结束 的 时 候 ， 将 会 学 习 解决 这 个 限制 的 工具 。 


注意 : 

在 AngularJS 1.2 中 ，ngRoute 模块 默认 并 未 与 AngularJS 打包 在 一 起 。 它 被 包含 在 一 
个 名 为 angular-route.js 的 文件 中 ; 可 以 从 code.angularjs.org 下 载 对 应 于 所 选择 的 AngularJS 
版 本 的 文件 。 为 了 方便 起 见 ，AngularJS 1.2.16 版 本 的 ngRoute 模块 已 经 被 打包 到 本 节 的 样 
例 代 码 中 。 如 果 正 在 使 用 AngularJS 1.0.x， 就 不 需要 这 个 额外 的 文件 ， 因 为 ngRoute 与 
AngularJS 被 打包 到 了 一 起 。 


6.3.1 使 用 ngRoute 模块 


关于 模块 ngRoute 的 基础 知识 通过 样 例 学 习 最 容易 。 使 用 ngRoute 模块 时 ， 将 使 用 两 
个 视图 构建 图 书目 录 SPA: 一 个 主 视 图 和 一 个 细节 视图 。 这 两 个 视图 分 别 与 第 1 部 分 编写 
的 主 视图 和 第 2 部 分 编写 的 细节 视图 是 一 致 的 。 接 下 来 的 代码 展示 了 SPA 的 完整 
JavaScript， 可 以 在 本 章 样 例 代码 的 part_iii.html 文件 中 找到 它 。 该 代码 的 大 部 分 都 应 该 与 
第 1 部 分 和 第 2 部 分 的 内 容 相 似 ， 但 要 注意 这 里 使 用 了 三 个 新 的 AngularJS 组 件 : ngView 
指令 、$routeProvider 提供 者 和 $routeParams 服务 。 


<div ng-view="true"> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="angular-route.js"></script> 
<script type="text/javascript" src="books.js"></script> 
<script type="text/javascript"> 

Var booksModule = angular.module('booksModule', ['ngRoute']); 
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booksModule.factory('$books', booksService); 


booksModule.config (function($routeProvider) { 
$routeProvider. 
when('/', { 
templateUrl: 'part iii master.template.html', 
controller: BooksController 
}). 
when('/book/:id', { 
templateUrl: ' Part iii detail template.html', 
controller: BookDetailController, 
eloadonSearch: false 
}) 7 
DD); 


function BooksController($scope, $books) { 
$scope.books = $books.getAll(); 


for (var i = 0; i < $scope.books.length; ++i) { 
$scope.books[i] .templateUrl = (i ss 2 === 0 ? 
'master img left.template.html' 
'master img right.template.html'); 


} 


function BookDetailController ($scope, $books, $location, 
S$routeParams) { 
$scope.book = $books.getById (parseInt ($routeParams.id, 10)); 
$scope.selectedText = $location.search() ['highlight'] ? 
decodeURIComponent ($location.search() ['highlight']) 
null; 
$scope.getselection = function() { 
Var selected = window.getSelection() .tostring(); 
if (selected) { 
$location.search('highlight', encodeURIComponent (selected) ) ; 
} 
$scope.selectedText = selected; 
}; 
} 
</script> 


这 里 的 新 代码 并 不 多 , 但 正 是 这 一 小 部 分 代码 完成 了 大 量 的 工作 。 第 一 个 组 件 ngView 
指令 将 执行 相对 直观 的 任务 :通知 ngRoute 哪个 div 应 该 包含 当前 路 由 的 模板 .指令 ngView 
身 并 不 是 特别 复杂 。 在 AngularJS 中 , 通常 可 以 创建 一 个 附加 了 ngView 指令 的 div 元 素 ， 
然后 就 再 也 不 用 管 它 了 。 当 我 们 在 第 3 部 分 的 最 后 一 个 小 节 中 学 习 动 画 时 将 会 再 次 接触 到 
ngView 指令 ,不 过 , 现在 将 深入 学 习 之 前 代码 中 其 他 两 个 新 组 件 的 特殊 之 处 : SrouteProvider 
提供 者 和 $routeParams 服务 。 
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6.3.2 ”S$routeProvider 提供 者 


前 一 节 中 介绍 了 一 个 新 的 提供 者 $routeProvider， 它 值得 深入 进行 讲解 。 这 个 组 件 是 配 
置 客户 端 路 由 的 标准 工具 ， 所 以 几乎 所 有 AngularJS SPA 中 都 可 以 看 到 它 。S$routeProvider 
提供 者 必须 在 一 个 配置 块 中 进行 配置 一 一 也 就 是 在 一 个 传 入 到 模块 的 configO) 函 数 中 的 函 
数 。 可 以 使 用 可 串联 的 when() 函 数 配置 $routeProvider 提供 者 ， 它 将 在 路 由 和 处 理 器 对 象 之 
间 创 建 映 射 。 记 住 part_iii.html 文件 中 SrouteProvider 提供 者 的 用 法 : 

booksModule .config(function(S$routeProvider) { 
$routeProvider. 
when('/', { 
templateUrl: "part iii master.template.html', 
controller: BooksController 
}). 
when('/book/:id', { 
templateUrl: 'part iii detail.template.html', 
controller: BookDetailController, 
reloadonsearch: false 
1); 
1); 

处 理 器 有 几 个 可 配置 的 参数 ， 但 最 常用 的 是 template、templateUrl 和 controller。 如 果 
学 习 了 第 5 章 “ 指 令 ”， 那 么 这 些 参数 看 起 来 是 非常 熟悉 的 ， 因 为 它们 的 行为 与 对 应 的 指令 
对 象 设置 一 致 .。 通 过 参数 template 可 采用 内 翌 的 方式 编写 模板 HTML。 通 过 参数 templateUrl 
参数 ,可 以 通过 模板 缓存 人 D 指定 ngRoute 模块 应 该 泻 染 哪个 模板 , 与 第 1 部 分 中 如 何 使 用 
ngInclude 指令 是 非常 相似 的 。 

参数 controller 将 告诉 ngRoute 模 块 使 用 特定 的 控制 器 封装 指定 的 模板 。 关于 controller 参 数 
的 一 个 重要 细节 在 之 前 的 样 例 中 并 未 强调 ， 那 就 是 controller 参 数 可 以 接受 字符 串 以 及 函数 。 
在 part_iiihtml 文 件 中 ，controller 参 数 总 是 被 设置 为 一 个 函数 变量 一 一 也 就 是 BookController 
或 者 BookDetailController。 不 过 ,如 果 使 用 module.controller0 语 法 声明 控制 器 的 话 ， 就 可 以 
在 controller 参 数 中 按照 名 字 引 用 控制 器 。 例 如 ， 如 果 声 明 的 BookDetailController 代 码 如 下 
所 示 : 


booksModule .controller ('DetailController', function($scope, $books, 
$location, S$routeParams) { 
$scope.book = $books.getById (parseInt ($routeParams.id, 10)); 
$scope.selectedText = $location.search()['highlight'] ? 
decodeURIComponent ($location.search() ['highlight']) : 
null; 


$scope.getselection = function() { 
Var selected = window.getSelection() .tostring(); 
if (selected) { 
$location.search('highlight', encodeURIComponent (selected) ) ; 
} 
$scope.selectedText = selected; 
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3 
1); 


那么 可 以 像 下 面 的 代码 一 样 声 明 路 由 配置 : 


booksModule.config (function($routeProvider) { 
$routeProvider. 
when('/', { 
templateUrl: "part iii master.template.html', 
controller: BooksController 
> 
when('/book/:id', { 
templateUrl: 'part iii detail.template.html', 
controller: 'DetailController', 
reloadonsearch: false 
]) 
1); 


在 之 前 的 样 例 中 , 传 给 controller 参数 的 字符 串 必须 与 控制 器 的 名 字 相 匹配 一 一 也 就 是 
传 给 module.controller0) 函 数 的 第 一 个 参数 。 


注意 : 

你 可 能 已 经 注意 到 之 前 的 样 例 为 /book/:id 路 由 在 处 理 器 中 设置 了 一 个 reloadOnSearch 
选项 。 它 强调 了 一 个 与 $location 和 ngRoute 之 间 交 互相 关 的 小 细节 。 默 认 情 况 下 ，ngRoute 
模块 将 模拟 传统 的 服务 器 端 路 由 ; 因此 ， 默 认 每 次 $location.path 或 者 $location.search 改变 
时 ， 它 都 将 “重新 加 载 ” 视图。 当 AngularJS 重新 加 载 视 图 时 ， 它 将 销毁 旧 的 $scope， 创 建 
新 的 作用 域 并 再 次 执行 控制 器 函数 。 因 此 ， 如 果 在 控制 器 初始 化 时 修改 了 $location.search， 
而 且 包 含 了 ngRonute 模块 ， 但 未 将 reloadOnSearch 选项 设置 为 false， 那 么 AngularJS 将 阻 
塞 在 创建 和 销毁 作用 域 的 无 限 循环 中 。 有 三 种 方式 可 以 避免 这 个 问题 。 可 以 将 该 路 由 的 
reloadOnSearch 选项 设置 为 false、 在 $location hash 中 存储 JavaScript 状态 (对 $location .hash 
的 改变 永远 不 会 引起 ngRoute 改变 视图 ) 或 者 避免 使 用 ngRoute 模块 。 


在 part iii.html 文件 中 使 用 $routeProvider 时 的 第 一 个 重要 概念 是 路 由 参数 。 模 块 
ngRoute 允许 路 由 字符 串 包含 参数 化 的 组 件 (由 : 符号 表示 )。 一 个 典型 的 用 例 是 /book/:id 路 
由 ， 如 果 用 户 导航 至 #book/3、#Wbook/42 或 者 打 book/foo， 那 么 /book/:id 路 由 的 处 理 器 将 被 
使 用 。 不 过 ， 处 理 器 可 以 访问 URL 中 由 :id 表示 的 部 分 所 指定 的 (字符 串 ) 值 。 在 之 前 的 样 例 
中 ， 处 理 器 将 访问 一 个 分 别 等 于 3'、'42' 或 者 'foo' 的 id 参数 (通常 使 用 下 一 节 将 要 讲解 的 
SrouteParams 服务 )。 如 果 熟 悉 MVC 框架 (例如 Ruby on Rails 或 者 Express) 中 路 由 的 话 ， 
AngularJS 中 的 路 由 参数 实际 上 是 与 它们 是 一 致 的 。 


记 住 ， 提 供 者 是 一 个 用 于 创建 AngularJS 服务 的 地 数 。S$routeProvider 提供 者 是 非典 型 
的 ， 因 为 它 提供 的 服务 Sroute 不 像 提 供 者 自身 那么 有 用 。Sroute 服务 公开 了 关于 当前 路 由 
的 数据 (包含 了 路 由 参数 ), 但 为 了 使 用 它 , 需要 使 用 $routeProvider 为 该 应 用 定义 路 由 结构 。 
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如 你 在 part iii.html 文件 中 所 看 到 的 ， 可 以 相当 轻松 地 编写 一 个 SPA， 而 不 必 使 用 $route 
服务 。 


6.3.3 $routeParams 服务 


S$routeParams 服 务 提供 了 一 个 POJO, 其 中 包含 了 当前 路 由 的 路 由 参数 和 $location.search 
值 。 为 了 避免 冲突 ， 例如， 如 果 用 户 将 要 访问 part_iiihtml 中 的 ##book/foo?id=bar， 那 么 路 
由 参数 的 优先 级 将 高 于 $location.search 值 。 也 就 是 说 在 ##book/foo?id=bar 样 例 中 ， 
SrouteParams.id 将 等 于 'foo'， 而 不 是 'bar'。 


注意 : 

大 多 数 情况 下 , 在 控制 器 的 整个 生命 周期 中 , $SrouteParams 属性 的 值 都 是 保持 不 变 的 。， 
因为 控制 器 和 作用 域 将 在 视图 改变 时 被 销毁 。 不 过 ， 如 果 在 路 由 处 理 器 中 将 之 前 提 到 的 
reloadOnSearch 选项 设置 为 false， 那 么 $routeParams 的 键 和 值 可 能 会 改变 ， 但 不 会 重新 实 
例 化 控制 器 。 


6.3.4 SPA 中 的 导航 


你 可 能 已 经 注意 到 了 我 们 尚未 看 到 主 模板 part iii master.html 和 细节 模板 
part iii detail.html 的 源 代码 。 这 是 因为 它们 几乎 与 第 1 部 分 的 HTML 代码 
(part_ i ng_include.html) 和 第 2 部 分 的 HTML 代码 (part_ii_highlight.html) 是 一 致 的 。 为 了 完 
整 性 ， 下 面 是 part_iii_master.html 文件 的 代码 : 


<div ng-repeat="book in books" 
ng-include="book.templateUrl"> 
</div> 


使 用 ngInclude 包 含 的 模板 实际 上 与 第 1 部 分 中 看 到 的 master img template.lefthtml 和 
master_img_template.right.html 模板 是 一 致 的 。 下 面 是 稍微 经 过 修改 的 master_img_template. 
left.html 模板 : 


<div class="book-preview"> 
<div class="book-preview-image"> 
<img ng-src="{{ book.image }}"> 
</div> 
<div class="book-preview-text"> 
<h3> 
<a ng-href="#/book/{{book. id}}"> 
{{ book.title }} 
</a> 
</h3> 
<h4> 
By {{ book.author }} 
</h4> 
<em> 
{{ book.preview | limitTo:140 }} 
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</em> 
</div> 
<div style="clear: both"> 
</div> 
</div> 


接 下 来 是 part iii_detail.html 模板 : 


<h3 style="cursor: pointer"> 
<a ng-href="#/"> 
Back to Master List 
</a> 
</h3> 
<div style="float:left; width: 300px; margin: 25px"> 
<img ng-src="{{ book.image }}" style="width: 300px"> 
</div> 
<div style="float: left; width: 600px;"> 
<h1> 
{{ book.title }} 
</h1l> 
<h3> 
By: {{ book.author }} 
</h3> 
<p ng-click="getSelection()" 
ng-bind-html-unsafe="book.preview | highlight:selectedText"> 
</p> 
</div> 
<div style="clear: both"></div> 


如 你 所 见 ，master_img_template.left.html 和 part_iii_detail.html 模板 已 经 被 修改 为 包含 
一 些 链接 ， 以 便于 浏览 。 不 过 ， 这 些 链接 将 使 用 ngHref 指令 ， 而 且 只 修改 URL 的 哈 希 部 
分 。 例 如 ， 注 意 在 part_iii_detail.html 模板 中 ， 用 于 返回 主 视图 的 链接 将 把 用 户 导航 至 #/， 
而 不 是 /。 为 了 正确 地 集成 ngRoute 模块 ，a 标记 链接 到 的 URL 必须 以 圾 开头 。 

你 可 能 已 经 知道 了 , AngularJS 能 够 正确 地 计算 a 标记 href 特 性 中 的 表达 式 。 指 令 ngHref 
严格 来 讲 没有 必要 让 AngularJS 计算 表达 式 ， 但 是 与 a 标记 相 比 ， 它 确实 有 两 个 优点 。 首 
先 ， 如 果 表 达 式 存在 错误 的 话 ，ngHref 指令 不 会 改变 href 特性 的 值 ， 所 以 当 表达 式 中 存在 
问题 时 ， 用 户 也 不 会 被 重 定向 至 一 个 垃圾 URL。 第 二 个 原因 是 为 了 阻止 搜索 引擎 怜 虫 疏 取 
AngularJS 链接 。 通 常 搜 索引 擎 疏 虫 不 执行 JavaScript。 相 反 它 们 只 是 解析 页 面 的 HIML， 
并 找到 所 有 href 特性 链接 到 的 位 置 ， 在 AngularJS 上 下 文中 这 可 能 是 一 个 包含 了 大 量变 量 
名 称 的 URL( 封 装 在 {{}} 中 )。 幸 亏 ， 现 在 有 工具 可 以 使 搜索 引擎 候 取 AngularJS 网 站 。 接 
下 来 将 讲解 一 个 这 样 的 工具 。 


6.3.5 ”搜索 引擎 和 SPA 


搜索 引擎 怜 虫 不 会 真正 执行 页 面 的 JavaScript, 所 以 如 果 正 在 构建 SPA, 那么 有 一 个 潜 
在 的 问题 : Google 无 法 疏 取 这 个 网 站 。 当 然 ， 这 可 能 也 是 一 个 优点 。 例 如 ， 如 果 该 应 用 是 
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面向 公司 内 部 的 ， 或 者 要 求 在 展示 任何 有 意义 的 功能 之 前 必须 登录 ， 那 么 我 们 可 能 不 希望 
搜索 引擎 疏 取 自己 网 站 。 不 过 ， 如 果 希 望 编写 一 个 面向 大 众 的 SPA， 那 么 让 网 站 展示 的 商 
业 计 划 显 示 在 Google 搜索 引擎 的 顶部 是 非常 关键 的 ， 不 要 担心 ; 本 节 将 讲解 一 种 策略 ， 用 
于 保证 SPA 是 搜索 引擎 友好 的 。 

首先 有 一 句 警告 : 在 本 节 ， 将 要 完成 一 些 服务 器 端 工作 。 没 有 一 个 正常 运行 的 Web 服 
务 器 ， 就 无 法 与 典型 的 搜索 引擎 怜 虫 进行 正确 地 交互 ， 所 以 必须 在 NodeJS 中 编写 六 行 
JavaScript 代码 。 如 果 正 在 使 用 不 同 的 服务 器 框架 集成 AngularJS， 那 么 不 要 担心 ; 可 以 采 
用 本 节 将 要 讲解 的 方式 ， 与 Ruby on Rails、PHP 的 Zend 框架 、Nginx 和 大 多 数 其 他 Web 
服务 器 工具 进行 集成 。 

而 且 ， 本 节 内 容 只 要 求 编写 很 少 的 代码 ( 数 行 服务 器 端 JavaScript、1 行 HTML 和 两 行 
AngularJS JavaScript)， 但 是 该 代码 密度 很 高 ， 它 将 在 底层 执行 大 量 复杂 的 操作 。 尤 其 是 ， 
在 本 书 的 所 有 其 他 小 节 中 , 我 们 只 是 编写 客户 端 JavaScript, 而 本 节 学 习 的 内 容 将 在 机 器 上 

建 两 个 服务 器 。 不 过 ， 不 要 被 吓 到 ; 只 要 足够 熟悉 Linux 样式 的 终端 ， 应 该 就 能 够 创建 

一 个 怜 虫 友好 的 SPA。 


6.3.6 ”在 服务 器 上 设置 Prerender 


本 节 将 要 学 习 的 方式 依赖 于 一 个 称 为 Prerender 的 服务 (www.prerender.io)。 从 高 级 别 上 
看 ，Prerender 将 使 用 PhantomJS( 使 用 JavaScript API 的 一 个 开源 的 无 领导 者 的 浏览 器 ) 仆 取 
该 网 站 。 因 为 PhantomJS 是 一 个 全 功能 浏览 器 ， 所 以 它 将 真正 地 运行 AngularJS 应 用 ， 方 
式 几乎 与 Google Chrome 一 致 。 当 怜 虫 将 页 面 识 别 为 SPA 时 ， 它 将 向 服务 器 索要 页 面 息 虫 
友好 的 预 泻 染 版 本 一 一 实际 上 是 SPA 的 一 个 普通 HIML 版 本 。Prerender 为 许多 服务 器 框 
架 提 供 了 插件 和 指南 (可 以 在 Prerender 的 网 站 http://www.prerender.io 中 找到 这 些 指南 ), 但 
是 在 本 章 将 使 用 它 的 NodeJS 插件 。 


注意 : 

Prerender 有 一 个 付费 选项 ， 但 出 于 本 章 的 目的 ， 你 不 需要 注册 Prerender 的 账户 。 
Prerender 的 代码 是 开源 的 ， 而 且 本 节 你 将 创建 Prerender 爬 取 服务 的 本 地 托管 版 本 。 尽 管 
考虑 到 性 能 和 可 靠 性 等 原因 ， 在 生产 环境 中 使 用 Prerender 的 付费 平台 可 能 是 更 好 的 选择 ， 
但 是 创建 自己 的 版 本 更 有 利于 评估 和 教学 。 


Prerender 设置 由 两 个 组 件 组 成 。 第 一 个 组 件 是 独立 的 NodeJS 服务 器 ， 它 将 被 用 作对 
PhantomJS 的 封装 : 事实 上 ， 可 以 向 这 个 PhantomJS 服务 器 发 送 一 个 HTTP 请 求 (使 用 URL 
路 径 部 分 的 URL)， 服 务 器 将 返回 一 个 泻 染 页 面 的 静态 HTML 版 本 。 该 服务 器 在 NodeJS 
包 管理 器 npm 中 是 可 用 的 ， 包 名 为 prerender。 为 了 看 到 实际 的 服务 器 ,请 浏览 至 包含 了 本 
章 样 例 代 码 的 目录 , 并 运行 npm install。 然 后 通过 运行 node./node_modules/prerender/server.js 
启动 PhantomJS。 最 后 ， 打 开 浏 览 器 并 访问 http://localhost:3000/http://www.google.com。 你 
应 该 看 到 熟悉 的 Google 主页 。 在 终端 中 ， 应 该 大 约 看 到 下 面 的 输出 : 


2014-08-21T18:53:52.2652 getting google.com 
2014-08-21T18:53:52.3392 got 200 in 74ms for google .com 
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在 预 泻 染 的 Google 主页 和 实际 的 Google 主页 (在 浏览 器 中 看 到 的 ) 之 间 有 一 个 关键 的 
区 别 : 预 泻 染 版 本 没有 JavaScript， 也 没有 script 标记 。 它 只 是 页 面 加 载 完成 之 后 (包括 所 有 
的 JavaScripb， 页 面 HTML 状态 的 一 个 快照 。 


注意 : 

Prerender 的 付费 服务 实际 上 由 之 前 描述 的 PhantomJS 服务 器 的 受 管理 的 云 版 本 所 组 成 
的 。 因为 可 以 在 本 地 运行 开源 版 本 ,所 以 在 评估 它 的 时 候 就 没 必 要 注册 使 用 它 的 付费 版 本 。 
接 下 来 要 描述 的 第 二 个 组 件 可 以 被 配置 为 向 任何 Prerender PhantomJS 服务 器 发 起 请 求 ,无 
论 它 是 运行 在 本 地 还 是 Prerender 的 受 管理 服务 器 。 


第 二 个 组 件 是 我 们 所 选择 的 Web 服务 器 中 间 件 (对 于 本 章 来 说 ， 就 是 基于 NodeJS 的 
Web 服务 器 )， 它 将 拦截 搜索 引擎 疏 虫 的 请 求 ， 并 把 这 些 请 求 发 送 给 PhantomJS 服务 器 。 该 
组 件 是 特定 于 Web 服务 器 的 ， 但 是 Prerender 在 网 址 http://www.prerender.io 中 提供 了 将 该 
组 件 集成 到 常见 Web 服务 器 工具 Nginx\、Apache 和 Ruby onRails 的 指南 .NodeJS 的 Prerender 
中 间 件 可 以 通过 npm 获得 ， 名 字 为 prerendernode。 可 以 通过 在 包含 了 本 章 样 例 代 码 的 目 
录 中 运行 npm install 安装 该 包 , 遗憾 的 是 , prerender-node 中 间 件 目前 只 兼容 于 Express Web 
框架 (这 是 目前 在 NodeJS 社区 中 最 流行 的 Web 服务 器 框架 )。 Express 4.8.5 作为 依赖 被 包含 
在 了 本 章 样 例 代码 的 packagejson 文件 中 , 所 以 如 果 尚 未 运行 npm install, 那么 请 运行 该 命 
令 安装 这 两 个 组 件 Prerender 和 Express。 下 面 是 本 节 用 于 提供 HTML 页 面 的 Web 服务 器 : 


Var express = require('express'); 
Var prerender = require('prerender-node'); 


Var app = express(); 
app .use (prerender); 
app.use (express.static('./')); 


app.listen (8080); 


console.1log('Listening on port 8080'); 


如 果 不 熟 悉 Express 也 不 要 担心 ， 所 有 真正 需要 了 解 的 是 : 之 前 的 代码 将 使 用 两 个 中 
间 件 函数 在 端口 8080 上 创建 一 个 Web 服务 器 : Prerender 中 间 件 ， 然 后 是 返回 当前 目录 中 
静态 文件 的 静态 中 间 件 (也 就 是 说 ， 使 用 ./foo.html 的 内 容 响应 http://localhost:8080/foo.html 
的 请 求 )。 尝试 使 用 node server_prerenderjs 命令 启动 该 服务 器 ,并 访问 http://localhost:8080/ 
part_iii_seo.html 。 该 页 面 是 part iii.html 的 搜索 引擎 友好 版 本 ， 因 此 它 有 两 处 改动 。 为 了 
解 part_iii_seo.html 的 特殊 之 处 ， 需 要 理解 Google 的 怜 虫 是 如 何 处 理 大 量 使 用 AJAX 的 页 
面 的 。 


6.3.7 ”Google AJAX Crawling 规范 


GoogleAJAX 疏 取 规范 定义 了 搜索 引擎 疏 虫 应 该 如 何 处 理 大 量 使 用 JavaScript 的 页 面 , 例如 
AngularJS SPA。 可 在 http://developers.googl]e.com/webmasters/ajax-crawling/docs/specification 网 址 
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中 读 取 增强 的 完整 规范 ， 但 是 出 于 AngularJS SPA 的 目的 ， 下 面 的 简略 概述 应 该 足够 了 。 

AJAX 疏 取 规范 的 存在 是 为 了 帮助 怜 虫 识别 大 量 使 用 JavaScript 的 页 面 , 并 依赖 于 一 个 
事实 : SPA 中 没有 页 面 重 载 。 实 际 上 ， 当 疏 虫 找到 href 以 帮 开 头 的 a 标记 时 (规范 称 之 为 美 
观 的 URL)， 它 将 假设 该 链接 会 引起 JavaScript 转换 页 面 。 注 意 : 美观 的 URL 必须 以 提 开 
头 ， 从 而 使 仆 虫 可 以 区 别 表 示 客 户 端 路 由 的 链接 和 包含 用 户 滚 动 位 置 的 链接 。 然 后 该 怜 虫 
将 把 美观 的 URL 转换 成 所 谓 的 丑陋 的 URL, 它 将 使 用 ?_escaped fragment = 蔡 换 雪 。 例 如 ， 
对 于 图 书目 录 SPA 来 说 ， 疏 虫 将 看 到 类 似 于 part 于 seo.html#Wbook/s 的 美观 URL， 并 尝 
试 企 取 对 应 的 丑陋 URL part iii_seo.html?_escaped fragment =/book/5。 因 为 该 转换 将 把 
URL 的 哈 希 部 分 添加 到 查询 部 分 中 ， 所 以 Web 服务 器 实际 上 接收 的 是 客户 端 路 由 。 

你 可 能 会 好 奇 ， 现 在 Web 服务 器 将 接收 到 _escaped fragment 查询 参数 中 的 客户 端 路 
由 ， 那 么 服务 器 应 该 如 何 处 理 它 呢 ? 答案 是 我 们 已 经 完成 了 所 有 必需 的 工作 ! Prerender 中 
间 件 将 通过 拦截 所 有 含有 _escaped fragment 查询 参数 的 请 求 ,并 把 它们 发 送 到 PhantomJS 
服务 器 的 方式 处 理 这 种 情况 。PhantomJS 服务 器 将 为 SPA 视图 返回 为 一 个 静态 HTML， 而 
Web 服务 器 将 把 这 个 静态 HTML 发 送 给 朴 虫 ， 然 后 聆 虫 就 高 高 兴 兴 地 索引 该 HTML。 


6.3.8 为 搜索 引擎 配置 AngularJS 
现在 我 们 已 经 为 SPA 搜索 引擎 集成 创建 了 服务 器 设置 ， 接 下 来 需要 对 AngularJS SPA 
做 一 些小 小 的 调整 。 首 先 ， 需 要 在 HTML 头 标 记 中 添加 一 行 代 码 : 


<head> 
<title>Part III: Basic SPA with SEO</tit1le> 


<meta name="fragment" content="!"> 
</head> 


该 代码 将 使 Google 立刻 把 该 页 面 识别 为 SPA。 记 住 ， 搜 索引 擎 候 虫 擅长 理解 传统 的 
HTML 链接 。 如 果 扑 虫 无 法 将 该 页 面 识别 为 SPA， 它 就 不 知道 如 何 添加 _ escaped_fragment 
_ 查 询 参数 ， 因 此 ， 扑 虫 将 只 会 看 到 一 个 空白 页 面 。 使 用 了 meta 标记 后 ， 扑 虫 知道 使 用 含 
有 _ escaped_fragment 查询 参数 的 请 求 重新 请 求 页 面 ， 以 获得 预 泻 染 的 页 面 。 

另外 ， 需 要 对 AngularJS 应 用 配置 做 一 个 小 小 的 改动 。 记 住 , 默认 AngularJS 将 为 客户 
端 路 由 使 用 #， 而 不 是 枚 。 幸 亏 ，AngularJS 使 它 变 得 易于 配置 : 


booksModule.config (function($routeProvider, $locationProvider) { 
$routeProvider. 

when('/', { 
templateUrl: 'part iii master.template.html', 
controller: BooksController 

}). 

when('/book/:id', { 
templateUrl: "part_iii detail.template.html', 
controller: BookDetailController, 
reloadonsearch: false 

1); 
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$locationProvider.html5Mode (false) 
$locationProvider.hashpPrefix('!'); 
FD 


通过 hashPrefix0 函 数 可 以 设置 客户 端 路 由 中 # 和 /之 间 的 任何 字符 串 。 这 只 有 一 种 用 例 : 
为 搜索 引擎 集成 插入 必需 的 !。 html5Mode() 函 数 将 强制 AngularJS 使 用 它 的 遗留 URL 配置 ， 
这 对 于 使 客户 端 路 由 在 非 HTML5 浏览 器 中 正常 工作 是 必需 的 。 


6.3.9 真正 的 搜索 引擎 集成 


恭喜 ! 你 已 经 完成 了 所 有 保证 SPA 被 正确 疏 取 所 需 的 工作 。 最 后 一 步 是 将 所 有 的 工作 
组 织 在 一 起 , 查看 疏 虫 慌 取 SPA 的 方式 .打开 两 个 终端 , 并 浏览 至 本 章 的 样 例 代 码 。 Makefile 
文件 中 包含 了 两 个 简单 的 命令 : make phantomjs-server 用 于 启动 Prerender PhantomJS 服务 
器 , make seo-web-server 用 于 启动 启用 了 Prerender 的 Web 服务 器 。 在 第 一 个 终端 窗口 中 运 
行 make phantomjs-server， 在 第 二 个 窗口 中 运行 make seo-web-server。 现 在 我 们 应 该 能 够 在 
浏览 器 中 打开 http://localhost:8080/part_iii_ seo.html? escaped fragment =/， 查 看 图 书目 录 的 
静态 HTML 版 本 ! 

尝试 单 击 Les Miserables 的 标题 .浏览 器 地 址 栏 中 的 路 径 应 该 变 成 了 /part iii_seo.html?_ 
escaped_fragment =/#!/book/1。 正确 配 置 的 候 虫 将 使 用 /part_iii_seo.html? escaped fragment 
=/book/1 蔡 换 它 。 尝 试 浏览 该 URL， 我 们 应 该 看 到 为 Les Miserables 预 泻 染 的 细节 视图 。 


注意 : 

对 于 生产 应 用 ,你 可 能 更 希望 在 另 一 台 机 器 上 运行 PhantomJS 服务 器 , 并 使 用 Prerender 
PhantomJS 服务 器 的 缓存 能 力 。 本 节 使 用 的 设置 对 于 教学 目的 是 非常 理想 的 ， 但 是 使 用 单 
个 生产 机 器 在 每 次 爬虫 尝试 抓 取 页 面 时 执行 客户 端 JavaScript， 将 会 引起 重大 的 性 能 开销 。 
如 果 它 的 性 能 是 不 可 接受 的 ， 那 么 可 以 在 另 一 台 含有 本 地 Redis 或 者 MongoDB 缓存 的 服 
务 器 上 创建 PhantomJS 服务 器 ， 或 者 使 用 Prerender 的 付费 服务 。 


6.3.10 ”介绍 动画 


AngularJS 1.1.5 引入 了 一 个 令 人 激动 的 功能 : 使 用 CSS3 动画 在 视图 之 间 实 现 动画 转换 
的 能 力 ! 通过 演示 页 面 之 间 使 用 运动 的 方式 实现 导航 ， 证 明了 转换 可 以 使 UI 变 得 更 加 直 
观 。 例 如 ， 通 常 采 用 了 主 表明 细 (master-detail) 模 式 的 应 用 将 从 右 将 细节 设计 视图 滑 入 ， 再 
将 它们 向 右 滑 出 。 这 与 常见 的 移动 浏览 器 规范 (在 页 面 中 滑动 实际 上 将 触发 “后 退 ” 按 钮 ) 
集成 得 非常 好 。AngularJS 动画 使 得 在 SPA 中 集成 这 个 功能 变 得 非常 简单 。 

注意 : 

AngularJS 动画 要 求 浏览 器 支持 CSS3 动画 。Chrome、Firefox 和 Safari 最 新 的 版 本 都 
支持 CSS3 动画 。 不 过 ，Internet Explorer 10 和 更 新 的 版 本 才 会 支持 CSS3 动画 支持 。 


类 似 于 ngRoute 模块 ，AngularJS 的 动画 支持 被 添加 在 一 个 不 同 的 ngAnimate 模块 中 。 
为 了 使 用 该 模块 ， 需 要 从 http:/code.angularjs.org 下 载 对 应 于 所 选择 的 AngularJS 核心 版 本 
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的 angular-animate.js 文件 。 为 方便 起 见 ， 对 应 于 AngularJS1.2.16 版 本 的 angular-animate.js 
文件 已 经 被 打包 到 了 本 章 的 样 例 代码 中 。 一 旦 使 用 script 标记 包含 了 angular-animate.js 文 
件 ， 还 需要 在 ngAnimate 模块 中 添加 一 个 依赖 : 
Var booksModule = angular.module('booksModule', 
['ngRoute', 'ngAnimate']); 

为 有 效 地 使 用 ngAnimate 模块 ， 需 要 了 解 CSS3 @keyframes 规则 的 基础 知识 。 
@keyframes 规则 是 CSS 动画 的 主要 构建 块 : 它 允 许 定 义 从 一 组 CSS 值 到 另 一 组 CSS 值 的 
转换 。 例 如 ， 下 面 是 一 个 @keyframes 的 使 用 样 例 ， 本 节 将 使 用 该 代码 让 视图 逐渐 地 从 右 侧 
移动 到 屏幕 中 : 

@keyframes slideInRight { 

from { transform:translatex(100%); } 


to { transform: translatex(0); } 
} 


@keyframes 规则 的 最 基本 使 用 方法 是 使 用 from 和 to 关键 字 分 别 表示 动画 的 起 始 和 结 
束 状 态 。 在 动画 开始 时 ， 浏 览 器 将 应 用 对 应 于 from 关键 字 的 CSS 样式 ， 并 做 一 个 线性 转 
换 到 to 关键 字 对 应 的 样式 。 在 之 前 的 样 例 中 ， 当 动画 开始 时 ， 相 关 的 元 素 将 被 转换 到 屏幕 
的 最 右边 ， 在 结束 时 ， 它 将 回 到 正常 的 位 置 。 不 过 ，@keyframes 规则 只 定义 了 高 级 别 的 动 
画 。 为 了 在 SPA 中 添加 具体 的 动画 ， 需 要 使 用 CSS3 动画 规则 。 


注意 : 

对 于 更 复杂 的 动画 来 说 , 通过 @keyframes 规则 可 以 按照 百分比 指定 动画 中 的 点 。 也 就 
是 说 ， 可 以 告诉 @keyframes 规则 : 动画 应 该 有 某 些 CSS 属性 从 22% 开 始 使 用 ， 在 48% 的 
位 置 开始 使 用 另 一 组 属性 。 关 键 字 from 对 应 于 0%， 关 键 字 to 对 应 于 100%。 不 过 ， 这 个 
功能 通常 只 对 于 创建 混合 动画 有 用 : 例如 ， 创 建 弹跳 动画 ， 一 个 元 素 滑 到 左边 ， 然 后 再 滑 
回 右 边 。 不过， 在 Angular 中 视图 之 间 的 转换 上 下 文中 ， 该 功能 通常 是 不 必要 的 ， 因 为 像 
淡 入 淡出 或 者 滑动 这 样 的 进入 动画 不 要 求 使 用 多 个 组 件 。 


通过 CSS3 动画 规则 可 以 向 CSS 选择 器 中 附加 真正 的 动画 (也 就 是 由 @keyframes 规则 
定义 的 动画 )。 下 面 是 本 节 将 使 用 的 一 个 ng-enter CSS 类 的 样 例 ， 通 过 该 类 可 以 使 用 
slideInRight @keyframes 规则 : 


-ng-enter { 
animation:slideInRight 0.25s both linear; 
} 


无 论 元 素 在 何 时 创建 (或 者 何 时 被 JavaScript 标 记 了 ng-enter CSS 类 ), 所 有 含有 ng-enter 
CSS 类 的 元 素 都 将 被 添加 动画 。 之 前 ， 我 们 为 动画 指定 了 4 个 属性 。 第 一 个 参数 
animation-name 属性 被 设置 为 slideInRight， 这 是 将 要 使 用 的 @keyframes 规则 名 称 。 第 二 个 
参数 animation-duration 属性 被 设置 为 0.25s， 意 味 着 动画 应 该 在 0.25 秒 的 时 间 中 发 生 。 第 
三 个 参数 animation-fill-mode 属性 被 设置 为 both， 意 味 着 关键 帧 的 fom CSS 样式 应 该 在 动 
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画 启动 之 前 应 用 ， 关 键 帧 的 to CSS 样式 应 该 在 动画 完成 之 后 持久 化 。 最 后 ， 第 4 个 参数 
animation-timing-function 属性 被 设置 为 linear， 这 意味 着 元 素 应 该 以 恒定 的 速度 滑 入 。 
注意 ， 目 前 名 称 ng-enter 没有 什么 特殊 的 地 方 。 可 以 使 用 任何 内 容 命名 该 类 ， 并 得 到 
相同 的 效果 ， 但 是 一 旦 我 们 开始 用 ngAnimate 模块 ， 名 称 ng-enter 的 重要 意义 就 变 得 非常 
清晰 了 。 


6.3.11 实际 的 ngAnimate 模块 


现在 我 们 已 经 基本 掌握 了 CSS3 @keyframes 和 动画 规则 是 如 何 工 作 的 ， 接 下 来 就 可 以 
为 图 书目 录 SPA 添 加 一 些 基本 的 动画 了 。 将 在 主 视图 和 细节 视图 之 间 创 建 几 个 基本 的 转换 。 
尤其 是 ， 当 用 户 单 击 主 视图 上 的 一 本 书 时 ， 主 视图 将 从 左边 滑 出 ， 细节 视图 将 从 右 侧 滑 入 。 
相反 ， 当 用 户 单 击 细节 视图 上 的 返回 链接 时 ， 细 节 视 图 将 滑动 到 右 侧 ， 主 视图 将 从 左 侧 滑 
入 。 整 体 的 效果 是 : 细节 视图 是 “to the right of” 主 视图 。 可 以 在 本 章 的 样 例 代 码 的 
part_iii_animations.html 文件 中 看 到 实际 的 样 例 。 
为 了 实现 这 个 效果 ， 需 要 4 个 不 同 的 动画 。 主 视图 需要 能 够 从 左 侧 滑 入 ， 并 向 左 侧 滑 
出 ， 细 节 视 图 需要 能 够 从 右 侧 滑 入 并 向 右 侧 滑 出 。 因 此 ， 需 要 4 个 @keyframes 规则 : 
@keyframes slideOutRight { 
to { transform: translatex(100%); } 
“RE slideOutRight { 
to { -moz-transform: translatex(100%); } 
Ce slideOutRight { 
to { -webkit-transform: translatex(100%); } 
} 


@keyframes slideOutLeft { 
to { transform: translatex(-100%); } 
} 
Q@-moz-keyframes slideOutLeft { 
to { -moz-transform: translatex(-100%); } 
} 
@-webkit-keyframes slideOutLeft { 
志和 { -webkit-transform: translatex(-100%); } 
t 


@keyframes slideInRight { 
from { transform:translatex(100%); } 
to { transform: translateX(0); } 
} 
Q@-moz-keyframes slideInRight { 
from { -moz-transform:translateXx(100%); } 
to { -moz-transform: translatex(0); } 
} 
Q@-webkit-keyframes slideInRight { 
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from { -webkit-transform:translatex(100%); } 
to { -webkit-transform: translatex(0); } 


@keyframes slideInLeft { 
from { transform:translateXx(-100%); } 
to { transform: translatex(0); } 
Q@-moz-keyframes slideInLeft { 
from { -moz-transform:translatex(-100%); } 
to { -moz-transform: translateXx(0); } 
} 
Q@-webkit-keyframes slideInLeft { 
from { -webkit-transform:translatex(-100%); } 
to { -webkit-transform: translatex(0); } 
} 


遗憾 的 是 ，-moz-keyframes 和 -webkit-keyframes 规 则 是 必须 的 ， 因 为 在 当前 版 本 的 
Chrome 和 旧版 Firefox 中 ， 不 支持 普通 的 旧 @keyframes。 类 似 地 ， 需 要 在 实际 的 CSS 类 中 添 


加 -webkit-animation 和 -moz-animation: 


.master-view.ng-enter { 
z-index: 127 
-webkit-animation:slideInLeft 0.25s both linear; 
-moz-animation:slideInLeft 0.25s both linear; 
animation:slideInLeft 0.25s both linear; 

} 

.master-view.ng-leave { 
-webkit-animation:slideoutLeft 0.25s both linear; 
-moz-animation:slideOutLeft 0.25s both linear; 
animation:slideOutLeft 0.25s both linear; 


.detail-view.ng-enter { 
z-index: 1; 

-webkit-animation:slideInRight 0.25s both linear; 
-moz-animation:slideInRight 0.25s both linear; 
animation:slideInRight 0.25s both linear; 

} 

.detail-view.ng-leave { 
—webkit-animation:slideOutRight 0.25s both linear; 
-moz-animation:slideOutRight 0.25s both linear; 
animation:slideOutRight 0.25s both linear; 

} 


注意 ， 之 前 CSS 规则 的 目标 是 多 个 类 。 也 就 是 说 ，.detail-view.ng-leave 规则 只 应 用 于 
同时 含有 detail-view 类 和 ng-leave 类 的 元 素 。 将 目标 选择 为 detail-view 类 的 原因 是 : 这样 
我 们 就 可 以 为 细节 视图 指定 一 个 不 同 于 主 视图 的 动画 。 可 以 将 一 个 CSS 类 附加 到 视图 中 ， 
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如 下 所 示 : 


<div ng-view="true" 
class="{{pageClass}}" 
style="position: absolute" 
autoscroll="true"> 
</div> 
然后 可 以 在 视图 的 每 个 控制 器 中 为 pageClass 变量 赋 一 个 值 。 例 如 ， 下 面 是 可 以 在 主 
视图 控制 器 中 可 以 完成 的 工作 : 


function BooksController($scope, $books) { 
$scope.pageClass = 'master-view'; 
// ... 其 余 代 码 
} 
现在 有 一 个 更 琼 手 的 问题 ， 那 就 是 为 什么 选择 ng-enter 和 ng-leave 类 呢 ? ngAnimate 
模块 将 分 别 把 这 些 类 添加 到 正在 创建 或 者 销毁 的 元 素 中 。 对 于 SPA 中 视图 的 特殊 情况 ， 当 
视图 将 要 切换 出 去 时 ，ngAnimate 模块 将 添加 ng-leave 类 ， 并 在 销毁 元 素 之 前 等 待 动画 完 
成 。 当 视图 需要 被 切换 进来 时 ，ngAnimate 模块 将 添加 ng-enter 类 ， 并 等 待 动 画 完成 ， 然 
后 移 除 ng-enter 类 。 


注意 : 

你 可 能 已 经 注意 到 ， 在 本 节 中 ，ngView 元 素 被 设置 为 使 用 position: absolute。 正 确实 
现 动 画 的 一 个 特别 棘手 的 细节 是 : 尽管 进入 和 离开 这 两 个 ngView 元 素 都 是 可 见 的 ， 但 是 
要 保证 它们 在 垂直 方向 上 处 于 相同 的 级 别 。 通常 ， 当 两 个 div 元 素 有 相同 的 父亲 时 ， 第 二 
个 将 显示 在 第 一 个 的 下 方 ， 除 非 使 用 CSS 对 它们 进行 重新 定位 。 使 用 绝对 定位 通常 是 保证 
在 动画 过 程 中 ， 一 个 视图 不 影响 另 一 个 视图 位 置 的 最 简单 方式 。 


这 就 是 为 SPA 实现 动画 所 需 的 所 有 工作 了 ! 一 旦 包含 了 ngAnimate 模块 ， 剩 下 大 部 分 
工作 就 是 创建 CSS 类 了 。 当 CSS 类 完成 之 后 ， 只 要 动画 设计 良好 ， 就 可 以 使 应 用 的 UI 变 
得 更 加 直观 。 


6.4 小 结 


恭喜 ! 我 们 已 经 构建 了 自己 的 第 一 个 AngularJS SPA, 并 实现 了 搜索 引擎 兼容 性 和 动画 。 
SPA 是 一 个 强大 的 范例 ， 它 将 为 开发 者 提供 对 页 面 UX 更 精细 的 控制 ， 以 及 通过 更 清晰 的 
模板 、 数 据 分 离 得 到 潜在 的 更 佳 性 能 。 不 过 ，SPA 并 不 是 所 有 应 用 的 最 佳 选择 。 对 于 简单 
的 搜索 引擎 依赖 网 站 ， 例 如 博客 ， 如 果 使 用 简单 的 静态 HTML 就 足够 了 ， 那 么 使 用 SPA 
可 能 有 点 大 材 小 用 。 不 过 ， 在 学 习 SPA 过 程 中 ， 我 们 还 学 习 了 AngularJS 模板 和 $location 
服务 ,它们 可 以 将 强大 的 功能 注入 到 传统 的 多 页 面 应 用 中 。 因 此 ， 即 使 觉得 SPA 不 是 个 人 
应 用 的 正确 选择 ， 也 可 以 从 模板 和 S$location 服务 中 受益 。 
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本 章 内 容 : 

依赖 注入 的 基础 知识 和 优点 
推断 、 标 注 和 内 联 函 数 注解 
将 服务 绑 定 到 依赖 注入 器 
创建 服务 的 三 种 方式 

服务 的 常见 用 例 

使 用 提供 者 配置 AngularJS 


本 章 的 样 例 代码 下 载 : 
可 以 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文 件 。 


AngularJS 既是 代码 库 也 是 框架 。 除了 提供 复杂 的 工具 之 外 , 它 还 提供 了 组 织 代码 的 结 
构 。 尤 其 是 ，AngularJS 的 依赖 注入 提供 了 一 个 框架 ， 用 于 编写 高 度 可 重用 、 高 度 模块 化 和 
易于 单元 测试 的 代码 。 如 果 之 前 编写 过 AngualrJS 控制 器 ， 那 么 就 等 于 已 经 使 用 依赖 注入 


了 。 例 如 ， 在 下 面 样 例 中 ， 依 赖 沪 


function MyController( $scope, $http ) { 
// 代码 在 这 里 


} 


你 可 能 已 


经 理所当然 的 认为 AngularJS 可 以 通过 一 些 魔法 将 了 


E 入 器 将 把 $scope 和 $http 服务 传 入 MyController 函数 中 : 


E 确 的 参数 传 入 


MyController 中 ， 从 而 使 可 以 访问 正确 的 Sscope， 并 使 用 $http 发 起 HTTP 请 求 。 这 个 特殊 的 
魔法 被 称 作 依赖 注入 , 而 $scope 和 S$http 都 是 服务 。 服 务 是 一 些 通 过 名 字 唯 一 标识 的 JavaScript 
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变量 , 而 依赖 注入 知道 这 个 名 字 。 工厂 和 提供 者 是 两 种 构造 服务 的 方法 ， 本 章 将 进行 讲解 。 


7.1 依赖 注入 概述 


依赖 注入 是 2004 年 由 Martin Fowler 首次 为 管理 Java 的 复杂 性 而 提出 的 设计 模式 。 尽 
管 它 起 源 于 Java 社区 , 但 是 依赖 注入 已 经 传播 到 了 脚本 语言 中 , 例如 JavaScript。 而 Google 
在 内 部 对 依赖 注入 的 强调 ， 使 它 从 开始 就 成 为 AngularJS 的 核心 功能 。 

Google 支持 的 依赖 注入 的 一 般 概 念 是 : 业务 逻辑 和 依赖 构造 永远 不 应 该 发 生 在 相同 的 
代码 块 中 。 或 者 ， 使 用 更 具体 的 术语 来 解释 ， 寺 关键 字 和 new 关键 字 永 远 不 应 该 发 生 在 相 
同 的 函数 中 (除了 创建 只 包含 数据 的 对 象 之 外 )。 尽 管 这 个 原则 是 有 争议 的 ， 但 它 是 
AngularJS 如 何 正常 工作 不 可 分 割 的 一 部 分 。 为 了 充分 利用 AngularJS， 我 们 应 该 理解 在 这 
个 原则 背后 的 原因 。 

通常 ， 大 型 JavaScript 库 将 把 它们 的 代码 拆 分 成 小 型 的 、 可 管理 的 函数 或 者 对 象 。 不 
过 随 着 代码 库 的 增长 ,管理 这 些 函 数 和 对 象 之 间 的 交互 将 变 得 相当 棘手 .例如 ,在 AngularJS 
1.2.16 中 ， 常 用 的 $http 服务 依赖 于 6 个 其 他 服务 ， 而 且 大 多 数 AngularJS 开发 者 从 未 直接 
使 用 它们 。 使 事情 变 得 更 加 复杂 的 是 ， 其 中 某 些 服务 还 有 自己 的 依赖 。 依 赖 注入 的 主要 目 
的 是 以 一 种 方便 的 方式 封装 构造 $http 和 它 所 依赖 的 服务 的 过 程 。 通 过 这 种 方式 , 最终 用 户 
不 需要 考虑 构造 $http 服务 的 内 部 细节 ， 实 现 $http 服务 的 开发 者 不 需要 考虑 底层 依赖 是 如 
何 构造 的 。 

当然 ， 除 了 使 用 依赖 注入 ， 另 一 种 方式 就 是 单 例 设计 模式 。 与 在 函数 参数 中 显 式 地 声 
明 依赖 相反 ， 可 以 依赖 于 全 局 状态 ， 并 创建 过 一 个 附加 到 全 局 window 对 象 的 Shttp 服务 实 
例 。 这 似乎 是 一 种 有 吸引 力 的 方式 ， 因 为 构建 全 局 单 例 $Shttp 对 象 似乎 解决 了 抽象 Shttp 的 
对 象 依赖 问题 。 不 过 ，AngularJS 使 用 明显 更 加 复杂 的 依赖 注入 模式 ， 并 不 是 因为 它 是 一 个 
迁 腐 的 受 虐 狂 ， 而 是 使 用 依赖 注入 有 着 众多 的 优点 。 

就 像 所 有 依赖 于 全 局 状态 的 方式 一 样 ， 单 例 模式 难以 实现 单元 测试 ， 而 且 基 于 上 下 文 
适应 的 能 力 从 根本 上 就 是 有 限 的 。 单 例 模式 难以 实现 单元 测试 的 原因 非常 直观 : 为 在 一 个 
测试 中 使 用 $http 对 象 ， 我们 就 不 得 不 修改 全 局 状态 ， 这 样 对 于 所 有 测试 来 说 它 都 发 生 了 改 
变 。 这 将 为 开发 者 增加 额外 的 任务 ， 因 为 他 们 需要 在 测试 完成 后 清除 全 局 状态 ， 而 且 这 种 
方式 可 能 会 在 测试 中 引入 难以 诊断 的 问题 。 如 果 考 虑 最 常见 的 AngularJS 服务 $scope 的 话 ， 
单 例 模 式 无 法 适应 不 同上 下 文 的 问题 就 变 得 更 加 明显 。 尽管 通 常 将 $http 服务 实现 为 单 例 可 
能 是 足以 满足 需求 ， 但 是 $scope 服务 为 所 有 控制 器 都 提供 了 一 个 不 同 的 作用 域 。 这 是 因为 
AngularJS 依赖 注入 可 以 检测 AngularJS 的 内 部 状态 和 应 用 配置 ， 从 而 基于 上 下 文 提供 正确 
的 作用 域 对 象 ， 而 单 例 要 求 使 用 一 个 单独 的 间接 层 ， 用 于 保证 我 们 得 到 正确 的 作用 域 。 


注意 : 

如 果 是 单 例 设计 模式 的 拥护 者 ， 则 不 要 在 AngularJS 的 上 下 文中 进行 过 多 尝试 。 尽 管 
单 例 设计 模式 有 它 的 优点 ， 但 是 使 用 它 就 意味 着 你 在 与 AngularJS 的 核心 原则 之 一 进行 斗 
争 ， 并 因此 使 工作 变 得 困难 。 
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7.1.1 Sinjector 服务 


有 趣 的 是 ， 依 赖 注入 器 自身 也 是 一 个 可 用 的 服务 。$injector 服务 提供 了 对 依赖 注入 器 
对 象 的 访问 ，AngularJS 自身 将 使 用 它 创 建 控制 器 、 服 务 和 指令 。$injector 在 生产 代码 中 使 
用 的 并 不 频繁 (尽管 本 章 将 演示 一 个 用 例 )， 但 是 对 于 浏览 器 依赖 注入 的 一 些 更 加 微妙 的 功 
能 来 说 ， 这 是 一 个 便捷 的 学 习 工 具 。 

你 可 能 已 经 注意 到 ， 为 了 告诉 依赖 注入 器 需要 使 用 $http 服务 ， 需 要 把 它 添加 为 函数 
参数 : 

function MyController($http ) { 

// 代码 在 这 里 

和 

在 底层 ，AngularJS 的 $controller 服务 将 使 用 $injector 服务 的 invoke() 函 数 创建 该 控制 
器 。 函 数 invoke() 将 负责 分 析 什 么 参数 需要 被 传 入 MyController 函数 中 ， 并 执行 该 函数 。 
例如 ， 可 使 用 下 面 的 代码 运行 MyController: 


$injector.invoke (MYController) 
或 者 可 以 简单 地 内 联 $injector 服务 应 该 执行 的 函数 : 


$injector .invoke (function($http) { 
// 在 这 里 使 用 $http 
1); 


在 之 前 的 代码 片段 中 ，$http 是 一 个 使 用 依赖 注入 器 注册 了 的 服务 。 不 过 要 注意 : 该 代 
码 中 并 未 包含 无 所 不 在 的 $scope 参数 。 这 是 因为 $scope 并 不 是 一 个 服务 ， 它 是 局 部 的 。 当 
开始 编写 自己 的 服务 时 会 学 习 其 中 的 原因 , AngularJS 使 用 $scope 的 方式 与 使 用 服务 的 方式 
不 兼容 。 为 了 使 该 代码 正常 工作 ，invoke0) 函 数 实际 上 将 接受 3 个 参数 。 第 二 个 是 一 个 上 下 
文 (可 以 忽略 )， 第 三 个 是 一 个 局 部 变量 的 映射 。 为 了 正确 地 注入 $scope 变量 ， 需 要 一 些 如 
下 所 示 的 代码 。 因 此 ， 记 住 这 是 一 个 解释 $scope 来 自 哪里 的 理论 实验 。 在 真实 的 应 用 中 我 
们 可 能 永远 不 会 使 用 该 代码 : 


$injector.invokel( 
function($scope, S$http) { 
// 在 这 里 使 用 $scope、s$http 
}, 
null, 
{ $scope: {} }); 


S$injector 服务 相当 简单 ， 但 是 这 些 样 例 掩 盖 了 重要 的 一 点 : AngularJS 如 何 知道 什么 参 
数 应 该 被 传 入 MyController 函数 中 呢 ? 在 之 前 的 样 例 中 ， 我 们 简单 地 假设 AngularJS 可 以 
基于 参数 名 分 析出 需要 传 入 的 服务 和 局 部 变量 。 事 实证 明 ， 有 几 种 方式 可 以 告诉 依赖 注入 
器 哪些 服务 需要 传 入 到 控制 器 或 者 服务 中 。 
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7.1.2 函数 注解 

在 AngularJS 上 下 文中 ， 函 数 注解 就 是 告诉 依赖 注入 器 哪个 服务 应 该 注入 到 函数 中 的 
方式 。 之 前 的 方式 被 称 为 推断 函数 注解 ， 因 为 依赖 注入 器 将 根据 函数 参数 推断 出 服务 。 
AngularJS 将 通过 调用 toString() 函 数 实现 : 在 JavaScript 中 , 调用 函数 的 toString() 方 法 将 返 
本 一 个 包含 了 完整 函数 定义 的 字符 串 ， 包 括 参数 名 称 。 与 其 他 函数 注解 策略 相 比 ， 推 断 函 
数 注解 是 更 加 直观 ， 并 且 更 加 常用 的 方法 。 

不 过 ， 在 处 理 JavaScript 缩 小 器 (minifieD 时 ， 推 断 函数 注解 策略 就 变 得 不 足 了 。 因 为 济 
览 器 端 JavaScript 通 常 要 通过 网 络 传输 , 而 开发 者 经 常 需要 保持 一 个 较 小 的 JavaScript 文 件 大 
小 ， 从 而 改善 页 面 加 载 速度 。 缩 小 器 将 执行 一 些 操作 ， 例 如 移 除 不 必要 的 空白 ， 将 可 读 的 
JavaScript 转 换 成 一 种 优化 了 文件 大 小 的 格式 。 激 进 的 缩小 器 甚至 使 用 一 种 称 为 重 整 
(mangling) 的 技术 ， 它 将 缩短 常用 的 变量 名 称 。 例 如 ， 如 果 代 码 经 常 使 用 一 个 名 为 $$ __ 
superInternalCache 的 变量 , 那么 使 用 了 重 整 的 缩小 器 将 使 用 一 些 更 短 的 名 称 蔡 代 它 , 例如 a。 

如 果 正 在 使 用 推断 函数 注解 ， 重 整 变量 的 缩小 器 也 可 能 会 引起 问题 ， 因 为 缩小 器 可 能 
将 $scope 参数 重 命名 为 其 他 名 称 ， 例 如 b。 然 后 依赖 注入 器 将 寻找 一 个 名 为 b 的 服务 ， 而 
不 是 $scope。 大 多 数 AngularJS 开发 者 都 使 用 内 联 函数 注解 , 用 于 保证 依赖 注入 器 在 重 整 变 
量 名 称 之 后 知道 使 用 哪个 服务 : 


myModule.controller('MyController', 
['$scope', '$http', function($scope, $http) { 
// 代码 
}1); 


之 前 的 方式 可 以 正常 工作 ， 因 为 缩小 器 永远 不 会 重 整 字符 串 的 内 容 一 一 想象 一 下 一 个 
重 整 错误 信息 文本 的 缩小 器 ! 在 使 用 $injector 服务 (也 就 是 ， 依 赖 注 入 器 服务 ) 进 行 演示 时 ， 
内 联 函 数 注解 的 特点 就 更 加 清晰 了 : 

$injector.invoke(['$scope', '$http', function(s, h ) { 


// 代码 
}11); 


内 联 函 数 注解 将 通过 向 S$injectorinvokeO 函数 传 入 一 个 数组 的 方式 表示 。 当 
S$injector.invoke() 函 数 收 到 数组 时 ， 它 会 假设 数组 中 的 最 后 一 个 元 素 是 将 要 执行 的 函数 ， 而 
且 在 此 之 前 的 每 个 元 素 都 代表 了 应 该 传 给 该 函数 的 一 个 参数 。 与 推断 函数 注解 不 同 ， 内 联 
函数 注解 不 依赖 于 函数 的 参数 名 称 ( 或 者 参数 的 数量 ), 这 就 是 为 什么 之 前 的 函数 可 以 使 用 s 
和 hh 的 原因 (而 不 是 gscope 和 S$http)。 


注意 : 

一 些 AngularJS 文档 使 用 了 内 联 函 数 注解 ,但 不 解释 原因 ， 所 以 许多 AngularJS 开发 者 
默认 使 用 的 就 是 内 联 函 数 注解 。 这 未 必 是 一 个 好 主意 ， 因 为 内 联 函 数 注解 更 加 难于 阅读 。 
内 联 函 数 注 解 还 使 用 了 一 种 受到 质疑 的 实践 : 为 AngularJS 服务 使 用 不 同 的 名 称 ， 例 如 使 
用 scope 而 不 是 $scope， 这 将 进一步 降低 可 读 性 。 
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第 3 个 也 是 最 古老 的 函数 注解 策略 被 称 为 $inject 注解 .AngularJS 的 老 用 户 可 能 记得 这 
种 方式 在 AngularJS 0.9x 中 是 唯一 的 函数 注解 策略 。 类 似 于 推断 注解 策略 ， 需 要 向 
$injector.invoke( 或 者 module.controller 或 者 module.service ) 中 传 入 一 个 函数 , 但 为 它 赋予 一 
个 如 下 所 示 的 $inject 属性 : 


function MyController(s, h) {} 
MyController.$inject = ['$scope', '$http']; 


$injector.invoke (MyController); 
myModule.controller('MyController', MyController); 


在 向 $injector.invoke 中 传 入 一 个 函数 时 ，AngularJS 首先 将 检查 $inject 属性 是 否 存在 。 
如 果 不 存在 ， 依 赖 注入 器 将 退 一 步 使 用 推断 函数 注解 。 通 常 我 们 不 使 用 这 个 $inject 注解 ， 
因为 它 要 求 额外 使 用 一 行 代码 声明 S$inject 属性 ， 而 且 更 加 宛 长 。 不 过 ， 像 内 联 函数 注解 一 
样 ， 它 确实 提供 了 对 重 整 变量 名 称 的 缩小 器 的 支持 。 

这 就 是 函数 注解 的 所 有 内 容 了 。 让 我 们 重新 复习 一 下 ， 有 三 种 策略 : 推断 、 内 联 和 
$inject。 推 断 函数 注解 是 最 简单 也 是 最 常用 的 策略 ， 但 是 在 使 用 重 整 变量 名 称 的 缩小 器 时 ， 
它 可 能 无 法 正常 工作 。 通 过 内 联 和 $inject， 可 将 依赖 注入 和 重 整 变量 名 称 的 缩小 器 一 起 
使 用 。 从 本 质 上 说 ， 它 们 是 可 以 相互 交换 的 ， 但 是 内 联 函 数 注解 在 AngularJS 社区 中 更 受 
欢迎 。 


7.2 构建 自己 的 服务 


现在 我 们 已 经 对 AngularJS 依赖 注入 的 工作 方式 有 了 一 个 基本 的 理解 ， 接 下 来 该 编写 
一 些 真正 的 服务 了 。 在 本 节 的 课程 中 ， 将 使 用 服务 构建 一 个 简单 的 股票 市 场 仪表 板 (使 用 
Yahoo Finance 应 用 编程 接口 )。 你 可 能 注意 到 该 代码 类 似 于 其 他 章节 中 使 用 的 Stock-Dog 应 
用 。 不过， 本 节 将 扩展 Stock-Dog 代码 ， 演 示 创 建 服务 的 不 同方 式 ， 所 以 如 果 之 前 已 经 深 
入 学 习 了 Stock-Dog 代码 ， 那 么 你 已 经 小 小 地 领先 了 一 步 。 本 节 展 示 的 代码 可 以 在 本 章 的 
样 例 代码 中 找到 ( 它 是 独立 于 Stock-Dog 代码 库 的 )。 可 以 通过 在 浏览 器 使 用 file:/// 打 开 每 个 
文件 的 方式 运行 样 例 代码 。 查 看 本 章 的 HTML 页 面 不 要 求 使 用 服务 器 。 不 过 ， 有 一 个 样 例 
将 使 用 一 个 简单 的 NodeJS Web 服务 器 (参见 本 章 样 例 代码 的 provider backendjs 文件 )， 所 
以 如 果 尚 未 安装 NodeJS， 就 应 该 访问 nodejs.org， 并 按照 所 选择 平台 对 应 的 安装 指令 进行 
安装 。 

AngularJS 模块 对 象 有 5 个 函数 ， 用 于 向 依赖 注入 器 声明 服务 。3 种 最 常见 的 方式 就 是 
service()、factory0 和 provider() 函 数 ， 本 章 的 标题 中 已 经 提 到 了 它们 。 在 本 节 ， 首 先 要 学 习 
的 是 service() 和 factory0 函 数 ， 它 们 是 定义 自 定义 服务 的 最 常用 方式 。 然 后 将 学 习 的 是 
provider() 函 数 , 它 将 允许 以 复杂 的 方式 配置 服务 .最 后 ,将 学 习 一 点 关于 constant0 和 value() 
函数 的 内 容 ， 它 们 不 经 常 使 用 ， 但 是 在 特定 的 情况 下 是 非常 有 用 的 。 
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7.2.1 factory() 函 数 


首先 要 学 习 的 函数 是 包 ctory0。 这 是 在 AngularJS 中 创建 服务 最 简单 也 是 常见 的 方式 ， 
几乎 在 所 有 AngularJS 代码 库 中 都 可 以 看 到 它 。 从 根本 上 讲 ， 依 赖 注入 器 将 使 用 factory 函 
数 创建 服务 的 实例 。 工 厂 代码 应 如 下 所 示 : 


myModule.factory('S$myService'，function() { 
Var myService = {}; 
// Construct myService 


return myService; 
1D); 


因此 ， 通 过 factory0) 函 数 可 以 告诉 依赖 注入 器 使 用 指定 的 函数 构造 任意 的 SmyService 
服务 。 指 定 函 数 的 返回 值 将 被 注入 到 所 有 把 SmyService 列 为 依赖 的 函数 中 。 例 如 : 


myModule.factory('$myService', function() { 
Var myService = { 
foo: "bar" 


}; 


return myService; 
1); 


myModule.controller('MyController', function($myService) { 
console.log (myService.foo); // Prints "bar" 


1D); 


工厂 可 以 通过 依赖 注入 接受 参数 ， 所 以 可 以 在 自己 的 服务 中 重用 像 Shttp 这 样 的 服务 
(或 者 甚至 是 自己 的 自 定义 服务 )。 许 多 AngularJS 代码 库 喜欢 使 用 服务 作为 特定 $http 调用 
的 封装 器 ， 从 而 使 它们 不 需要 在 不 同 的 控制 器 中 重用 相同 的 逻辑 。 事 实 上 ， 为 股票 市 场 仪 
表 编 写 的 工厂 正 是 如 此 。 不 过 要 小 心 不 要 在 依赖 图 中 引入 循环 : 如 果 服 务 A 从 依赖 注入 器 
中 请 求 服 务 B， 然 后 服务 B 再 从 依赖 注入 器 中 请 求 服务 A， 那 么 AngularJS 将 抛 出 一 个 
错误 。 

下 面 是 一 个 构建 服务 的 样 例 ， 该 服务 将 完成 一 些 事情 。 构 建 股票 市 场 仪表 的 任务 似乎 
令 人 长 惧 ,但 是 优秀 的 程序 员 总 会 记 住 一 句 中 国 谚语 :“ 千 里 之 行 ， 始 于 足下 ”。 通 过 这 种 
方式 ， 我 们 的 第 一 个 服务 将 是 构建 仪表 盘 过 程 中 最 简单 的 一 个 工作 单元 ， 该 服务 将 加 载 当 
前 的 Google 股票 价格 (Google 的 股票 代码 是 GOOG)。 可 在 本 章 的 样 例 代码 的 factory.html 
中 找到 该 样 例 代码 。 再 次 ， 本 章 没有 服务 器 组 件 ， 所 以 可 以 直接 在 浏览 器 中 打开 该 文件 ， 
或 者 使 用 所 选择 的 Web 服务 器 : 


<div ng-controller="MyController"> 
<h1l>Google Stock Price: {{price.quotes[0] .Ask}}</h1> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
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<script type="text/javascript"> 
Var chapter7Module = angular.module('chapter7Module', []); 


chapter7Module.factory('$googlestock', function($http) { 
var BASE = 'http://query.yahooapis.com/v1l/public/yql' 


Var query = encodeURIComponent ( 
"select * from yahoo.finance.quotes where symbol in (\'GOOG\')'); 
Var url = BASE + '?' + 'q=' + query + 
'&format=json&gdiagnostics=true&env=http://datatables.org/alltables.env'; 


Var service = {}; 
service.get = function() { 
$http.jsonp(url + '&callback=JSON CALLBACK'). 
success (function(data) { 
if (data.query.count) { 
var quotes = data.query.count > 1 ? data.query.results.quote : 
[data.query.results.quote]; 
service.quotes = quotes; 
} 
}). 
error (function(data) { 
console.1log(data); 
}) 7 
] 7 


service.get(); 
return service; 
1); 


function MyController ($scope, $googlestock) { 
$scope.price = $googlestock; 
} 
</script> 


之 前 的 $googleStock 服务 是 一 个 通常 如 何 使 用 工厂 的 原型 样 例 ， 工厂 将 创建 一 个 普 


的 对 象 ， 使 用 一 些 属性 和 函数 装饰 它 ， 然 后 返回 该 对 象 ( 在 JavaScript 的 说 法 中 ， 装 饰 一 个 
对 象 意味 着 添加 属性 和 方法 ,使 对 象 匹配 特定 的 接口 )。 另 外 ,我们 会 经 常 看 到 将 自 定义 服 


务 月 


目 作 $http 调用 或 者 几 个 紧密 相关 的 $http 调用 的 封装 器 。 
服务 有 一 个 微妙 的 但 是 关键 的 事实 使 它们 成 为 了 封装 $http 调用 不 可 缺少 的 部 分 : 从 所 


有 使 用 它 的 控制 器 和 服务 之 间 只 共享 了 一 个 服务 实例 的 意义 上 讲 , 服务 总 是 单 例 的 (尽管 这 
并 不 意味 着 它们 使 用 了 全 局 状态 依赖 的 单 例 设计 模式 ! )。 换 句 话说 ， 如 果 同 一 页 面 中 的 另 
一 个 控制 器 依赖 于 $googleStock 服务 ， 那 么 该 服务 将 只 执行 Yahoo Finance API 的 初始 化 一 


次 。 
用 ， 


这 对 于 应 用 的 性 能 来 说 是 极其 重要 的 ， 因 为 通常 AngularJS 中 最 大 的 瓶颈 就 是 Shttp 调 
而 服务 不 需要 再 引起 不 必要 的 服务 器 往返 通信 。 不 过 ， 这 也 是 为 什么 $scope 不 是 服务 
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的 原因 : 每 个 控制 器 中 使 用 的 Sscope 都 是 不 同 的 ， 所 以 创建 一 个 $scope 服务 并 不 合理 。 

封装 $http 调用 的 服务 的 一 个 常见 模式 已 经 通过 之 前 的 SgoogleStock 服务 和 它 的 getO 函 
数 进行 了 演示 。 本 例 中 只 有 一 个 $http 调用 , 它 唯 一 的 责任 就 是 一 次 性 使 用 API 加 载 所 有 的 
数据 。 数 据 被 隐藏 在 一 个 函数 的 背后 ， 或 者 如 之 前 的 例子 所 示 ， 公 开 为 服务 的 一 个 简单 属 
性 。 在 本 例 中 ，$googleStock 服务 将 从 Yahoo Finance API 中 加 载 一 个 报价 列表 ， 并 将 它 公 
开 为 quotes 属性 。AngularJS 的 数据 绑 定 (参见 第 4 章 ) 足 够 复杂 到 知道 何 时 $http 调用 已 经 
返回 ， 以 及 何 时 quotes 属性 已 经 被 更 新 。 

这 个 设计 模式 有 一 个 固有 的 权衡 : 服务 是 应 该 自己 重新 加 载 数据 ， 还 是 应 该 将 任务 委 
托 给 控制 器 ? 通常 ， 使 用 这 种 设计 模式 的 服务 有 一 个 加 载 数 据 的 初始 调用 。 一 些 使 用 
Sinterval 服务 的 服务 将 周期 性 地 刷新 数据 ， 或 者 甚至 是 使 用 Web 套 接 字 以 实时 的 方式 更 新 
数据 。 不 过 ， 其 他 服务 可 能 选择 允许 控制 器 处 理 数据 的 刷新 (可 能 在 用 户 单 击 按钮 时 )。 这 
两 种 方式 都 很 常见 ， 选 择 哪 一 种 取决 于 特定 的 情形 。 在 服务 中 处 理 刷 新 提供 了 一 个 方便 的 
抽象 层 ， 并 消除 了 从 多 个 控制 器 中 发 出 (偶然 的 ) 元 余 请 求 的 可 能 性 。 不 过 ， 可 能 需要 为 不 
同 的 控制 器 使 用 不 同 的 刷新 规则 ， 或 者 需要 将 数据 刷新 调用 绑 定 到 用 户 界面 中 (UD， 在 这 
种 情况 下 ， 将 责任 委托 给 控制 器 可 能 是 正确 的 选择 。 


7.2.2 service() 函 数 


元 余 命名 的 service0 函 数 是 创建 服务 的 另 一 种 方式 。 将 看 到 ，service0 函 数 事实 上 提供 
了 与 factory0) 函 数 相 同 的 功能 ， 只 有 一 些 理论 上 的 不 同 。 与 $inject 函数 注解 策略 一 样 ， 
service() 函 数 从 AngularJS 的 实验 版 本 0.9 开始 就 是 一 个 残留 的 技术 。 实际 上 , factory0 函 数 
以 一 种 更 优雅 、 更 现代 的 接口 提供 了 相同 的 功能 ， 但 是 可 以 看 到 service0 函 数 仍 在 使 用 。 

函数 service() 和 factory0 之 间 的 区 别 在 于 : factory0 函 数 要 求 在 代码 中 构造 一 个 对 象 并 
返回 它 ， 而 传 给 service() 函 数 的 函数 将 使 用 JavaScript 的 new 操作 符 执行 。 换 句 话 说 ， 在 
使 用 serviceO 函 数 时 ， 我 们 不 需要 显 式 地 构造 和 返回 一 个 新 的 对 象 ， 只 需要 将 属性 附加 到 
this 上 即 可 。 下 面 是 在 真正 的 JavaScript 中 使 用 service0 函 数 的 方式 : 

myModule .service ('S$myService'，function() { 


this.foo = "bar"; 
1D); 


myModule .controller ('MyController', function($myService) { 
console.1log (myService.foo); // Prints "bar" 

]) 

如 你 所 见 , service() 函 数 基 本 上 等 同 于 factory0 函 数 . 事 实 上 ,可 以 将 之 前 小 节 中 factory0) 
所 使 用 的 函数 传 入 service0 函 数 中 并 得 到 相同 的 结果 。 通常 service0 函 数 更 简洁 。 不 过 , 在 
JavaScript 中 的 this 关键 字 有 点 混淆 和 难于 使 用 , 许多 开发 者 都 避免 使 用 它 。 如 果 需 要 使 用 
service() 函 数 ， 那 么 在 嵌 套 函数 中 使 用 this 关键 字 时 一 定 要 小 心 。 在 本 节 的 样 例 代 码 中 ,将 
看 到 几 种 方式 ， 用 于 减 小 使 用 this 关键 字 的 风险 。 
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注意 : 

根据 面向 对 象 编程 语言 的 定义 ,JavaScript 可 能 或 者 可 能 不 是 面向 对 象 的 。 可 以 确定 的 
是 ， 像 继承 、 构 造 器 和 this 关键 字 这 些 常见 的 面向 对 象 模式 JavaScript 中 都 有 ， 但 是 它们 
的 工作 方式 完全 不 同 于 C++ 或 者 Java 这 样 的 面向 对 象 语言 。 幸 亏 ，AngularJS 不 强迫 你 尝 
试 在 JavaScript 中 靠近 面向 对 象 编 程 。 


在 本 节 ， 将 使 用 service0) 函 数 ， 通 过 另 一 种 常见 的 服务 设计 模式 创建 股票 市 场 仪表 盘 
的 复杂 版 本 。 该 服务 解决 的 问题 是 : 当 用 户 有 一 个 很 长 的 股票 列表 需要 查询 价格 时 。 实 际 
上 ， 可 以 假设 该 列表 非常 长 ， 如 果 一 次 性 从 Yahoo Finance API 加 载 所 有 数据 就 太 慢 了 。 出 
于 方便 的 原因 ， 假 设 下 面 这 个 含有 11 个 科技 股票 的 列表 足够 长 :: 


Var stocks = [ 
'GOOG', // Google 
'AAPL', // Apple 
'MSFT', // Microsoft 
'YHOO', // Yahoo 
'FB', // Facebook 
'AMZN', // Amazon 
'EBAY', // Ebay 
'ADBE', // Adobe 
"CoCD"; AAA Ciseo 
'QCOM', // Qualcomm 
'INTC' // Intel 

3 


与 上 一 节 中 公开 一 个 函数 用 于 加 载 完 整 列表 并 保存 最 后 的 结果 不 同 ， 将 公开 一 个 函数 
用 于 加 载 更 多 的 股票 价格 ， 并 存储 目前 所 加 载 的 所 有 价格 。 然 后 该 用 户 将 有 一 个 方便 的 
Load More 按钮 ， 用 于 从 服务 器 请 求 更 多 数据 。 可 以 在 本 章 样 例 代码 的 service html 中 找到 
该 代码 : 


<div ng-controller="MyController"> 
<hl ng-repeat="quote in stocks.quotes"> 
{{quote.sSymbol}}: {{quote.Ask}} 
</h1l> 
<span style="background-color: green" ng-click="stocks .getMore () "> 
Load More 
</div> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript"> 
Var chapter7Module = angular.module('chapter7Module', []); 


chapter7Module .service('$stocks'，function(Shttp) { 


Var BASE = 'http://query.yahooapis.com/v1l/public/yql' 
var this = this; 
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Var Stocks = [ss 
var load = function(stocks) { 


Var query = encodeURIComponent ( 
"select * from yahoo.finance.quotes where symbol in (\''+stocks.join(',') 
和 
Var url = BASE + '?2' + 'q="' + query + 
'&format=jsongdiagnostics=truegenv=http://datatables.org/alltables.env'; 


$http.jsonp(url + '&callback=JSON CALLBACK'). 
success (function(data) { 
if (data.query.count) { 


Var quotes = data.query.count > 1 ? 
data.query.results.quote : 
[data.query.results.quote]; 
_this.quotes = this.quotes.concat (quotes); 
下 
1)s 
error (function (data) { 
console.1log (data); 
1); 
}s 


this.quotes = []; 
this.getMore = function() { 
load(stocks.slice(this.quotes.length, this.quotes.length + 5)); 


}; 


this.getMore(); 
1); 


function MyController($scope, $stocks) { 
$scope.stocks = $stocks; 
} 


</script> 

之 前 的 getMore0 函 数 被 绑 定 到 Load More 按钮 ， 允 许 用 户 从 Yahoo Finance API 请 求 

接 下 来 5 个 科技 股票 的 价格 。 该 设计 模式 似乎 与 之 前 一 节 使 用 的 模式 (只 加 载 所 有 的 数据 一 

次 ) 并 无 太 大 的 不 同 ， 但 是 它 足够 常见 ， 值 得 予以 讨论 。 经 常 使 用 的 主 表明 细 (master-detail) 

设计 (用 一 个 主 视图 列 出 数据 项 ， 并 使 用 详细 视图 显示 特定 数据 项 的 细节 信息 ) 通 常会 从 按 

批 加 载 元 素 这 种 模式 中 受益 ， 尤 其 是 如 果 主 列表 很 长 的 话 。 通 过 这 种 方式 ， 我 们 不 会 因为 
一 次 性 加 载 所 有 股票 而 引起 巨大 的 开销 。 

另 一 个 值得 一 提 的 重要 细节 是 _this 变量 ， 它 将 被 设置 为 等 于 this。 如 果 是 一 个 有 经 验 

的 JavaScript 开发 者 ， 之 前 可 能 经 常 看 到 这 样 的 代码 ， 但 是 对 于 初学 者 来 说 这 样 做 的 原因 

可 能 不 太 清 晰 。 简 短 的 答案 是 ， 在 JavaScript 中 ，this 是 一 个 特殊 的 变量 ， 它 不 需要 尊重 


218 


第 7 章 服务 、 工 厂 和 提供 者 


JavaScript 变量 在 其 他 情况 下 落 入 的 作用 域 层次 。 注 意 ， 之 前 的 load0 帮 助 函数 是 使 用 var 
关键 字 声明 的 。 由 于 该 函数 被 声明 的 方式 , 在 load0 辅 助 函数 体 中 , this 引用 了 全 局 window 
对 象 ， 而 不 是 服务 对 象 。 使 事情 更 加 混淆 的 是 ， 这 个 行为 是 依赖 于 环境 的 ， 如果 在 NodeJS 
中 运行 测试 ， 那 么 laod0 辅 助 函 数 体 中 的 this 引用 的 是 NodeJS 的 global 对 象 。 不 过， 如 果 
将 load0 辅 助 函数 附加 到 了 服务 中 一 一 也 就 是 说 this.load = function() 人 一 一 this 将 引用 函数 
体 中 的 服务 。 换 句 话说 ，JavaScript 中 的 this 关键 字 的 复杂 程度 令 人 吃惊 ， 即 使 是 经 验 丰富 
的 JavaScript 开发 者 也 可 能 会 使 用 错误 。 

避 开 JavaScript 函数 上 下 文 问题 的 最 常见 方式 之 一 就 是 将 this 设置 为 this 的 别名 ， 从 
而 可 以 将 它 用 作 传 统 的、 含有 正常 词法 作用 域 的 JavaScript 对 象 。 这 是 我 们 通常 优先 使 用 
factory0 而 不 是 service0 的 主要 原因 之 一 。 在 JavaScript 中 构造 一 个 空 对 象 ， 并 使 用 各 种 不 
同 的 函数 和 属性 装饰 它 ， 通 常 比 欺骗 this 关键 字 更 易于 编写 和 理解 。 


注意 : 

JavaScript 函数 有 词法 作用 域 ( 它 的 行为 与 任何 其 他 编程 语言 中 的 作用 域 非常 相似 ) 和 上 
下 文 ( 它 将 决定 this 引用 的 是 什么 对 象 )。 上 下 文 是 完全 独立 于 函数 词法 作用 域 的 ， 通 过 内 
置 的 JavaScript 函数 call() , apply() 和 bind(), 可 以 使 用 任意 的 上 下 文 修改 和 调用 JavaScript 
函数 。 换 和 句 话 说 ， 根 据 函数 的 上 下 文 ，this 可 以 引用 任何 类 型 的 任何 对 象 ， 而 被 this 引用 
的 对 象 未 必 在 函数 的 词法 作用 域 层次 中 。 这 就 是 为 什么 尽管 JavaScript 从 技术 上 讲 可 以 被 
称 为 面向 对 象 编程 语言 ， 但 如 果 像 编写 Java 或 者 C++ 一 样 编写 JavaScript 的 话 ， 在 最 好 的 
情况 下 会 产生 浪费 ， 在 最 差 的 情况 下 会 产生 不 可 维护 的 意大利 面条 式 代 码 。 要 明智 地 使 用 
this 关键 字 : 如 果 代码 让 你 感到 混淆 ， 那 么 它 也 可 能 会 让 下 一 个 使 用 它 的 人 感到 混淆 。 换 
名 话说 ， 记 住 传奇 计算 机 程序 员 Brian Kernighan 的 经 典 名 言 “Debugging is twice as hard as 


writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, 


by definition, not smart enough to debug it” 。 


值得 一 提 的 是 , 关于 factory0 和 service0 函 数 之 间 的 区 别 还 有 一 个 更 加 重要 的 细节 。 所 
有 使 用 factory0 函 数 注 册 的 服务 都 可 以 使 用 service0 函 数 注册 , 不必 做 任何 改动 。 不 过 , 反 
之 则 不 一 定 绝 对 是 真 的 :使 用 service0 函 数 注册 的 服务 在 使 用 factory0) 方 法 注册 时 可 能 无 法 
正常 工作 。 这 是 由 于 JavaScript 众多 奇怪 行为 中 的 一 个 : JavaScript 构造 器 可 以 返回 一 个 值 ， 
如 果 该 值 是 一 个 对 象 或 者 数组 ， 那 么 new 操作 符 产 生 的 结果 对 象 就 是 这 个 返回 值 。 下 面 是 
对 JavaScript 从 构造 器 返回 值 这 个 奇怪 行为 的 总 结 : 


Var Constructorl = function() { 
this.value = "From Constructor"; 
return { value: "From Return Value"™" }; 
1; 
console.log((new Constructorl () ) .value) ; // "From Return Value" 


Var Constructor2 = function() { 
this.value = "From Constructor"7 
return; 


1; 
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console.log((new Constructor2 () ) .value) ; // "From Constructor" 


Var Constructor3 = function() { 
this.value = "From Constructor"; 
return 42; 
7 
console.log((new Constructor3 () ) .value) ; // "From Constructor" 


var Constructor4 = function() { 
this.value = "From Constructor"; 
return []; 


$ 
console.1og((new Constructor4()).value); // 未 定义 

现在 我 们 已 经 学 习 了 如 何 使 用 (几乎 可 以 相互 交换 的 )factory() 和 service() 函 数 构造 基本 
的 服务 ， 接 下 来 要 学 习 的 是 如 何 使 用 提供 者 构造 可 配置 的 服务 。 函 数 factory0 和 service() 
每 次 都 使 用 相同 的 方式 创建 服务 ， 但 提供 者 可 以 有 效 地 将 依赖 注入 器 使 用 的 工厂 函数 切换 
为 构造 一 个 指定 函数 。 在 下 一 节 ， 将 学 习 提供 者 是 如 何 工作 的 ， 以 及 它们 的 用 途 。 


7.2.3 ”provider() 函 数 


函数 provider0 是 创建 服务 最 有 表现 力 的 方式 ， 相 应 地 也 是 最 复杂 的 。 从 高 级 别 讲 ， 
provider() 函 数 可 以 基于 应 用 范围 的 配置 决定 注册 哪个 服务 。 事 实 上 在 底层 ， 我 们 刚刚 学 习 
的 factory0 和 service() 函 数 被 实现 为 provider(0) 函 数 之 上 的 语法 糖 。 对 于 大 多 数 情况 ， 使 用 
provider0 函 数 都 有 点 过 分 了 ， 通 常 在 构建 整个 AngularJS 应 用 的 过 程 中 可 以 不 使 用 任何 提 
供 者 。 不 过 ， 如 你 在 本 节 所 见 ， 提 供 者 对 于 测试 和 调试 来 说 是 极其 有 用 的 。 而 且 ， 即 使 不 
需要 编写 自己 的 提供 者 ， 许 多 内 置 服务 也 将 通过 提供 者 公开 配置 选项 。 在 本 节 ， 将 为 股票 
市 场 仪表 盘 创 建 自己 的 提供 者 。 在 编写 了 自己 的 提供 者 之 后 ， 将 使 用 内 置 的 ShttpProvider 
和 $interpolateProvider 提供 者 调整 一 些 核 心 AngularJS 功能 。 

到 目前 为 止 ， 我 们 已 经 了 解 到 提供 者 允许 基于 应 用 范围 的 配置 构建 不 同 的 服务 。 但 是 
应 用 范围 的 配置 从 哪里 来 呢 ? 为 回答 这 个 问题 ， 需 要 学 习 AngularJS 模块 的 configO) 函 数 。 
在 此 之 前 你 可 能 已 经 用 过 该 函数 : 在 配置 单 页 面 应 用 路 由 (参加 第 9 章 “ 测 试 和 调试 
AngularJS 应 用 ”)， 或 者 设置 gdigest 循环 应 该 执行 的 最 大 时 间 ( 参 见 第 4 章 “数据 绑 定 ”) 
时 。 这 些 只 是 config() 函 数 可 以 完成 的 两 个 样 例 。 函 数 config0) 的 主要 目的 是 配置 应 用 的 提 
供 者 ， 从 而 使 应 用 可 以 使 用 正确 的 服务 。 函 数 config0) 的 内 容 通 常 称 为 配置 块 。AngularJS 
将 在 控制 器 、 服 务 和 指令 实例 化 之 前 按 顺 序 运行 配置 块 。 从 语法 上 讲 ， 配 置 块 应 该 如 下 
所 示 : 


var app = angular.module('myApp', []); 


app.config (function($httpProvider) { 
// 在 这 里 使 用 $ShttpProvider 
有 


注意 ， 配 置 块 是 可 以 通过 依赖 注入 访问 提供 者 (而 不 是 服务 ) 的 唯一 位 置 。 例 如 ， 不 可 
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以 访问 控制 器 中 的 ShttpProvider: 


app.controller('MyController', function($httpProvider) { 
// 错误 ! $httpProvider 无 法 被 注入 到 控制 器 中 ，Angular 将 表示 它 无 法 找到 
$httpProviderProvider 
时 
另外 ， 只 可 以 在 配置 块 中 访问 提供 者 ， 而 不 是 在 具体 的 服务 中 。 例 如 ， 不 可 以 在 配置 
块 中 访问 $http: 
app.config(function($http) { 
// Angular 将 表示 它 无 法 找到 名 为 Shttp 的 提供 者 
]) 7 
之 前 的 代码 大 致 代表 了 开发 自 定义 提供 者 需要 对 配置 块 了 解 的 程度 。 尽 管 它们 可 能 有 
点 吓人 ， 但 是 配置 块 实际 上 只 是 与 提供 者 进行 交互 的 简单 工具 。 现 在 我 们 已 经 了 解 了 配置 
块 是 如 何 工作 的 ， 那 么 接 下 来 就 要 通过 编写 一 个 提供 者 来 学 习 它 。 
提供 者 的 一 个 常见 应 用 是 切换 参数 ， 例 如 服务 器 统一 资源 定位 符 (URL)， 而 不 必 调 整 
业务 逻辑 。 这 对 于 开发 和 测试 环境 来 说 是 尤其 有 用 的 。 特 别 是 ， 通 过 提供 者 可 以 让 生产 
JavaScript 与 生产 服务 器 通信 , 让 测试 JavaScript 与 测试 服务 器 通信 , 而 不 必修 改 业 务 罗 辑 。 
作为 这 个 特别 应 用 的 一 个 样 例 ， 将 编写 SgoogleStock 服务 所 使 用 的 API 终端 。 为 了 看 到 实 
际 的 样 例 ， 下 面 是 provider.html 中 的 代码 ， 它 将 是 我 们 的 “生产 ”应 用 : 


<body> 
<div ng-controller="MyController"> 
<hl>Google Stock Price: {{price.quotes[0] .Ask}}</h1l> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="provider.js"></script> 
</body> 


“开发 ”应 用 的 provider_dev.html 将 稍微 有 点 不 同 。 注 意 ， 为 使 provider_dev.html 正 
常 工作 ， 需 要 运行 node provider_backend.js 命令 启动 Yahoo Finance 后 端 (在 本 章 样 例 代码 
的 provider_backendjs 文件 中 )。 这 个 后 端 服务 器 模拟 了 Yahoo Finance API 的 输出 格式 , 但 
每 次 都 返回 42 作为 股票 价格 : 


<html ng-app="chapter7Module"> 
<head> 
<title></title> 
</head> 


<body> 
<div ng-controller="MyController"> 
<hl>Google Stock Price: {{price.quotes[0] .Ask}}</hl> 
</div> 
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<script type="text/javascript" src="angular.js"></script> 

<script typ' text/javascript" src="provider.j]s"></script> 

<script type="text/javascript"> 
chapter7Module .config(function ($googleStockProvider) { 

S$googleStockProvider.setEndpoint('http://lLocalhost:8080/?') 

]}) 7 

</script> 

</body> 
</html> 


事实 上 ， 开 发 环境 是 一 致 的 ， 除 了 一 个 配置 块 之 外 : 将 告诉 提供 者 使 用 运行 在 本 地 机 
器 8080 端口 上 的 伪 后 端 。 对 于 在 无 法 可 靠 访 问 网 络 连接 的 地 方 进行 开 发 时 , 或 者 希望 编写 
独立 于 Yahoo Finance API 的 测试 时 ， 这 个 设置 是 非常 有 用 的 。 

现在 你 已 经 看 到 了 我 们 希望 提供 的 接口 是 什么 ， 接 下 来 要 做 的 是 查看 如 何 真正 地 实现 
这 个 简单 的 提供 者 。 该 代码 在 本 章 样 例 代 码 的 providerjs 中 : 


var chapter7Module = angular.module('chapter7Module', []); 


chapter7Module.provider('$googlestock', function() { 
var endpoint = 'http://query.yahooapis.com/v1l/public/yql'; 


Var query = encodeURIComponent ( 
"select * from yahoo.finance.quotes where symbol in (\'GOOG\')'); 
var Url = endpoint + '?' + 'q=' + query + 
'&format=jsongdiagnostics=truegenv=http://datatables.org/alltables.env'; 


this.setEndpoint = function(u) { 
Url = QU; 
}; 


this.$get = function($http) { 
var service = {}; 
service.get = function() { 
$http.jsonp(url + '&callback=JSON CALLBACK'). 
success (function(data) { 
if (data.query.count) { 

Var quotes = data.query.count > 1 ? 
data.query.results.quote : 
[data.query.results.quote]; 

service.quotes = quotes; 

} 
}). 
error (function(data) { 
console.log (data); 
1D); 
}5 


service.get(); 
return service; 
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}; 
Ds 


function MyController ($scope, $googlestock) { 

$scope.price = $googlestock; 

b 

如 你 所 见 ，provider0) 函 数 的 工作 方式 有 点 像 service(0) 函 数 的 封装 器 。 传 给 provider() 函 
数 的 真正 函数 将 使 用 new 关键 字 调 用 ， 所 以 可 以 使 用 this 关键 字 附加 属性 。 所 有 提供 者 都 
必须 定义 $get 函数 ，AngularJS 将 使 用 它 构造 真正 的 服务 。 

在 构造 该 服务 时 ,$get 函数 将 使 用 new 操 作 符 执 行 ,所 以 可 以 使 用 service() 或 者 factory0 
函数 语义 (装饰 this， 或 者 创建 对 象 、 装 饰 它 并 返回 它 )。 注 意 $get 函数 几乎 与 用 于 定义 
$googleStock 工厂 的 函数 是 一 致 的 。 唯一 的 区 别 在 于 wl 和 对 应 的 变量 已 经 移 到 提供 者 作用 
域 中 ， 函 数 的 其 余部 分 是 一 致 的 。 通 过 将 url 变量 移动 到 提供 者 的 作用 域 中 ， 可 以 创建 
setEndpointO 函 数 。 该 函数 允许 配置 块 改变 服务 器 用 于 加 载 股票 价格 的 URL。 通 过 提供 者 
可 以 为 服务 的 配置 公开 一 个 API。 

提供 者 一 个 特别 有 趣 的 应 用 是 : 因为 JavaScript 允许 改写 对 象 属性 ， 所 以 可 以 在 配置 
块 中 改写 提供 者 的 整个 $get 函数 。 这 将 允许 我 们 在 配置 块 中 完整 地 替换 任何 服务 ， 无 论 使 
用 的 是 自 定 义 服务 还 是 内 置 服务 。 例 如 ， 假 设 我 们 不 希望 使 用 这 个 依赖 于 网 络 输入 输出 的 
服务 版 本 ， 相 反 希 望 显示 一 个 固定 的 价格 。 那 么 可 以 编写 一 个 配置 块 ， 改 写 $googleStock 
服务 的 $get 函数 : 

<body> 
<div ng-controller="MyController"> 


<hl>Google Stock Price: {{price.quotes[0] .Ask}}</h1l> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript" src="provider.js"></script> 
<script type="text/javascript"> 
chapter7Module .config(function($googleStockProvider) { 
$googleStockProvider.$get = function() { 
return { quotes: [{ Ask: 100 }] }; 
[a 
1D); 
</script> 
</body> 


这 里 的 代码 在 配置 时 已 经 改写 了 整个 $googleStock 服务 , 简单 地 返回 一 个 硬 编码 对 象 。 

尽管 不 推荐 这 么 做 , 但 是 可 以 简单 地 蔡 换 $http 服务 或 者 Scompile 服务 (因为 AngularJS 在 内 
部 也 将 使 用 这 些 内 置 服务 )。 
到 目前 为 止 ， 我 们 已 经 学 习 了 使 用 提供 者 的 基础 知识 。 提 供 者 是 服务 之 上 的 一 层 ， 通 
过 它 可 以 在 配置 块 中 为 配置 服务 定义 一 个 API。 尽 管 技术 细节 非常 直观 ， 但 是 服务 和 提供 
者 有 各 种 各 样 的 用 例 。 在 下 一 节 ， 将 浏览 一 对 服务 和 提供 者 的 用 例 ， 并 学 习 它们 对 应 的 设 
计 模 式 。 
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7.3 ”服务 的 常见 用 例 


到 目前 为 止 ， 本 章 已 经 讲解 了 如 何 创建 服务 和 提供 者 的 细节 ， 但 我 们 只 是 简单 了 解 了 
服务 在 实际 应 用 开发 的 上 下 文中 所 提供 的 优势 的 一 部 分 。 在 本 节 ， 将 构建 股票 市 场 仪表 盘 
的 更 多 内 容 ， 并 在 这 个 过 程 中 学 习 如 何 正确 地 使 用 服务 。 

AngularJS 初学 者 经 常会 问 的 一 个 问题 是 : 如 何在 相同 页 面 中 的 两 个 控制 器 之 间 共 
享 数据 ? 一 旦 应 用 变 得 足够 复杂 , 在 相同 的 视图 中 会 有 多 个 无 关 的 控制 器 , 但 是 我 们 仍 
然 希望 在 控制 器 之 间 共 享 特定 的 信息 ， 例 如 “当前 登录 的 用 户 是 谁 ? ” 某 些 开 发 者 通过 
将 顶级 控制 器 放 到 所 有 页 面 的 方式 改善 这 个 问题 , 该 控制 器 将 负责 加 载 通用 数据 并 将 它 
附加 到 页 面 的 根 作 用 域 中 。 这 可 能 很 方便 , 但 是 这 种 方式 将 把 依赖 管理 添加 到 了 HTML 
模板 中 (因为 所 有 的 控制 器 都 依赖 于 顶级 控制 器 )。 这 样 做 的 可 读 性 是 很 糟糕 的 ， 而 且 无 
法 使 用 AngularJS 的 依赖 注入 器 。 这 就 是 通常 为 什么 服务 是 在 控制 器 之 间 共 享 状态 的 推 
荐 方式 。 

使 用 服务 在 控制 器 之 间 共 享 状态 的 最 重要 原因 是 : 如 你 之 前 在 本 章 所 看 到 的 ， 服 务 是 
单 例 的 。 在 AngularJS 的 上 下 文中 ， 术 语 “ 单 例 ” 意 味 着 在 应 用 生命 周期 的 任何 时 间 点 最 
多 只 有 服务 的 一 个 实例 (再 次 ， 不 要 将 该 术语 与 常见 的 全 局 状态 依赖 单 例 设 计 模式 混淆 )。 
例如 ， 其 中 一 个 控制 器 使 用 了 S$http 服务 并 在 $http 对 象 上 设置 了 一 个 属性 ， 例 如 Shttp.foo = 
5。 那 么 在 完成 该 操作 之 后 ， 所 有 其 他 使 用 $http 服务 的 控制 器 和 服务 都 可 以 看 到 $http.foo 
等 于 5， 因 为 $http 在 所 有 控制 器 和 服务 中 都 是 相同 的 对 象 。 

在 考虑 $http 服务 时 , 这 样 做 的 优势 可 能 不 太 明 显 ; 不 过 , 请 考虑 另 一 个 样 例 , 使 用 $user 
服务 追踪 当前 登录 的 用 户 。 假 设 该 服务 的 目的 是 从 API 终端 加 载 当前 登录 的 用 户 ， 然 后 使 
用 户 改变 他 的 简介 照片 。 再 进一步 ， 假 设 现在 有 两 个 完全 独立 的 控制 器 一 一 个 帮助 显示 
页 面 的 导航 栏 ， 一 个 允许 用 户 改 变 他 的 简介 照片 。 这 两 个 控制 器 都 依赖 于 $user 服务 。 因 为 
Suser 服务 是 单 例 的 ， 所 以 只 有 一 个 $http 请 求 加 载 与 登录 用 户 相 关 的 数据 ， 而 且 当 一 个 控 
制 器 修改 用 户 的 简介 照片 时 ， 其 他 控制 器 的 Suser 服务 将 反映 出 这 个 改动 。 在 下 一 节 ， 将 应 
用 这 个 概念 ， 为 股票 市 场 仪表 盘 构 建 一 个 最 小 的 Suser 服务 。 可 以 在 本 章 样 例 代 码 的 
stock dashboard.html 文件 中 找到 本 节 的 所 有 代码 。 


7.3.1 构建 $user 服务 


本 章 到 目前 为 止 已 经 为 一 个 硬 编码 的 股票 列表 显示 出 了 价格 一 一 是 Google 股 票 价格 或 
者 11 种 技术 公司 股票 的 一 个 数组 。 在 本 节 ,将 扩展 该 功能 ， 允 许 每 个 用 户 指定 他 希望 追踪 
的 感 兴趣 的 股票 列表 。 特 别 是 ，$user 服 务 将 公开 一 个 股票 代号 的 数组 ，$stockPrices 服 务 将 
使 用 它 了 解 应 该 向 Yahoo Finance API 申 请 哪 只 股票 的 价格 。 本 节 不 用 创建 服务 器 组 件 用 于 
存储 和 加 载 当前 登录 的 用 户 ， 因 为 设置 服务 器 和 数据 库 将 为 这 个 样 例 增加 大 量 的 复杂 性 ， 
从 而 淡化 它 作为 教学 样 例 的 作用 。 因 此 ，$user 服 务 上 的 save0 和 load0 函 数 都 是 存根 ， 但 是 
如 果 有 真正 的 服务 存在 的 话 ， 设 计 模 式 是 相同 。 下 面 是 $user 服务 的 代码 : 
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chapter7Module.factory('$user', function() { 
Var user = { 
data: { 
stocks: ['GOOG', "YHOO'] 
} 
}; 


user.load = function() { 


// 服务 器 调用 的 存根 


} 


user.save = function(callback) { 
// 服务 器 调用 的 存根 
] 7 


user.load() 7 
return user; 
ty 


该 服务 使 用 了 factory0 函 数 , 默认 用 户 正 在 监视 Google 和 Yahoo 的 股票 价格 。 当 $user 
服务 被 创建 时 ， 它 将 自动 从 服务 器 加 载 当 前 那 登 录 的 用 户 。 在 本 例 中 ， 这 个 操作 是 一 个 存 
根 ， 但 是 将 它 转 换 成 服务 器 调用 是 非常 直观 的 。 只 有 一 个 控制 器 与 该 服务 直接 交互 ， 允 许 
用 户 向 他 的 监视 列表 添加 新 的 股票 的 控制 器 : 


function ModifyStockListController($scope，S$user，$stockPrices) { 
$scope.addTostockList = function(stock) { 
$user.data.stocks.push (stock) 
$user.save(); 
$stockPrices.1lo0ad(); 
} 
} 


这 个 控制 器 将 为 HTML 模板 提供 一 个 接口 , 用 于 添加 新 的 股票 到 用 户 的 监视 列表 、 保 
存 用 户 信息 ， 并 重新 加 载 所 有 股票 价格 ， 从 而 使 用 户 得 到 一 个 最 新 的 快照 。 下 面 是 一 个 使 
用 了 ModifyStockListController 的 HTML 模板 的 代码 : 


<div ng-controller="ModifystockListController"> 
<hl>Add new stock:</h1l> 
<input type="text" ng-model="newStock"> 
<input type="submit" 
ng-click="addToStockList (newStock) ; newStock = '';"> 
</div> 


这 个 特殊 的 样 例 有 一 个 简单 的 输入 字段 和 一 个 调用 addToStockList 函数 并 清空 输入 字 
段 的 提交 按钮 。 这 三 个 代码 样 例 组 成 了 股票 市 场 仪表 盘 中 服务 的 一 半 一 一 控制 器 。 另 一 半 
主要 是 基于 S$stockPrices 服务 的 , 它 将 负责 真正 地 加 载 和 显示 股票 价格 。 该 代码 是 下 一 节 的 
主题 。 
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7.3.2 ”构建 $stockPrice 服务 


服务 $stockPrices 将 加 载 和 显示 $user 服务 的 监视 列表 中 股票 的 价格 。 再 次 ， 服 务 是 单 
例 的 ， 所 以 $stockPrices 服务 使 用 的 $user 对 象 与 控制 器 相同 。$stockPrices 服务 看 起 来 与 前 
面 讨论 的 $googleStock 服务 相似 ,但 是 它 将 从 $user 服务 的 监视 列表 中 获得 股票 代号 的 列表 。 
下 面 是 stock dashboard html 中 的 $stockPrices: 


chapter7Module.factory('$stockPrices', function($http, $user, 
$interval) { 
Var service = { 
quotes: [] 
] 7 
Var BASE = "http://dquery.yahooapis.com/v1/public/yql'7 


service.loading = false; 
service.load = function() { 
service.loading = true; 


Var query = encodeURIComponent ('select * from yahoo.finance.quotes where '+' 
symbol in (\'' + $user.data.stocks.join(',') + '\')'); 
Var url = BASE + '?' + 'q=' + query + 
'&gformat=json&gdiagnostics=true&tenv=http: 
//datatables.org/alltables.env'; 


$http.jsonp(url + '&callback=JSON CALLBACK'). 
success (function(data) { 
service.loading = false; 
if (data.query.count) { 

Var quotes = data.query.count > 1 ? 
data.query.results.quote : 
[data.query.results.quote]; 

service.quotes = quotes; 

} 
}). 
error(function(data) { 
console.log (data); 
Bs 
}; 


service.load(); 
$interval (service.load, 5000); 
return service; 

1); 


该 服务 有 一 个 load0) 函 数 ， 用 于 从 Yahoo Finance API 加 载 股票 价格 的 完整 列表 。 与 使 
用 异步 VO 的 许多 服务 一 样 ， 当 load() 函 数 等 待 HITP 请 求 返回 时 ， 它 将 把 loading 标志 设 
置 为 tue， 从 而 使 UI 可 以 向 用 户 显 示 一 个 加 载 指示 器 。 另 外 ,该 服务 将 使 用 $interval 服务 ， 
之 前 我 们 尚未 使 用 过 。$interval 服务 是 对 JavaScript setInterval0 函 数 的 一 个 方便 的 封装 ， 它 
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将 安排 函数 以 特定 的 频率 重复 地 执行 。$interval 服务 将 setInterval0 函 数 绑 定 到 数据 绑 定 ， 
所 以 不 需要 在 传 给 $interval 服务 的 函数 中 调用 $scope.$apply()。 在 $stockPrices 服务 中 , 将 调 
用 $interval 服务 ， 安 排 service.load 函数 每 5000 毫秒 (5 秒 钟 ) 执 行 一 次 。 

现在 我 们 已 经 使 用 $stockPrices 服务 加 载 用 户 监视 列表 中 股票 的 价格 , 接 下 来 需要 将 该 
服务 绑 定 到 UI。 为 了 实现 这 个 任务 ， 需 要 创建 一 个 简单 的 控制 器 : 


function DisplayPricesController($scope，$stockPrices) { 
$scope.stockPrices = $stockPrices; 


} 


使 用 该 控制 器 的 HIML 看 起 来 应 该 与 之 前 小 节 中 的 代码 非常 相似 。 唯一 的 区 别 在 于 
个 HTML 将 使 用 一 个 简单 的 加 载 表示 器 ， 在 存在 未 完成 的 HTTP 请 求 时 通知 用 户 : 
<div ng-controller="DisplayPricesController"> 
<hl>My Stock Prices</h1l> 
<em ng-show="stockPrices.loading"> 
Loading... 
</em> 
<div ng-repeat="quote in stockPrices.quotes"> 
{{quote.Ssymbol}}: {{quote.Ask}} 
</div> 
</div> 


注意 ，DisplayPricesController 或 者 HTML 模板 都 不 依赖 于 $user 服务 。 好 的 服务 将 基 
于 其 他 服务 之 上 构建 抽象 层 。 设 计 糟糕 的 AngularJS 代码 的 一 个 特征 是 控制 器 和 服务 使 用 
了 很 长 的 依赖 列表 ， 因 为 每 个 依赖 都 将 使 控制 器 或 者 服务 变 得 更 加 复杂 。 在 理想 中 ， 控 制 
器 和 服务 的 依赖 应 该 不 超过 5 个 , 而 且 如 果 控 制 器 的 依赖 超过 10 个 , 那么 应 该 积极 考虑 把 
控制 器 拆 分 为 更 加 可 管理 的 块 。 服 务 提 供 了 一 个 良好 的 框架 用 于 实现 这 一 点 : 因为 它们 被 
绑 定 到 了 依赖 注入 ， 所 以 可 以 创建 服务 ， 用 于 从 控制 器 中 隔离 复杂 的 功能 块 。 在 股票 市 场 
仪表 盘 中 ， 可 以 轻松 地 把 来 自 DisplayPricesController 和 ModifyStockListController 的 功能 
合并 到 单个 控制 器 中 。 不 过 ， 保 持 它 们 处 于 分 离 的 状态 将 使 代码 更 简单 和 更 容易 管理 。 如 
果 控 制 器 出 现 了 太 多 的 代码 膨胀 ， 那 么 应 该 将 它们 分 割 到 多 个 控制 器 和 服务 中 。 

现在 我 们 已 经 学 习 了 在 构建 真正 应 用 的 上 下 文中 服务 的 一 些 用 例 ， 所 以 也 就 获得 编写 
自 定义 基 本 服务 所 需 的 所 有 信息 。 在 本 章 的 剩余 内 容 中 ， 我 们 学 习 如 何 使 用 AngularJS 的 
内 置 提 供 者 配置 应 用 。 这 些 内 置 的 提供 者 将 允许 以 众多 令 人 吃惊 的 方式 调整 核心 AngularJS 
民 务 。 


7.4 使 用 内 置 提供 者 


在 本 节 的 提供 者 内 容 中 ， 将 学 习 如 何 通过 提供 者 在 不 同 应 用 和 不 同 环境 中 使 用 配置 服 
务 。AngularJS 的 内 置 提 供 者 提供 了 一 些 有 限 的 、 但 是 极其 有 用 的 配置 选项 ， 通 过 这 些 选项 
可 以 调整 AngularJS 核心 功能 的 工作 方式 。 在 本 节 ， 将 学 习 3 个 可 应 用 于 内 置 提 供 者 和 配 


这 
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置 块 的 简洁 技巧 。 首先 要 学 习 的 是 如 何 改变 插值 分 隔 符 (也 就 是 用 于 绑 定 到 数据 绑 定 的 {{}} 
符号 )。 接 着 将 要 学 习 的 是 一 个 工具 ， 用 于 保护 用 户 避 免 访 问 恶 意 链接 。 第 三 个 也 是 最 后 一 
个 ， 将 学 习 另 一 种 使 用 自 定义 函数 和 值 扩展 AngularJS 表达 式 语 言 的 方式 。 


7.4.1 自 定义 插值 分 隔 符 


在 特定 的 例子 中 , 默认 的 {f}} 插 值 分 隔 符 可 能 会 受到 限制 。 例如 ，Go 编程 语言 的 服务 
器 端 HTML 模板 包 也 使 用 { 全 } 分 隔 模板 代码 ， 而 且 该 选项 是 不 可 配置 的 。 幸 运 的 是 ， 可 以 
在 配置 块 中 使 用 $interpolationProvider 提供 者 修改 AngularJS 的 分 隔 符 。 下 面 的 代码 将 使 用 
方 括号 (也 就 是 [中 ]) 作 为 插值 分 隔 符 : 


Var myModule = angular.module('myModule', []); 


myModule.config(function ($interpolateProvider) { 
// 使 用 [[ ]] 分 隔 AngularJs 绑 定 ， 因 为 使 用 { {}} 将 与 Go 产生 混淆 
$interpolateProvider.startsymbol('[['); 
$interpolateProvider.endsymbol(']]'); 

}); 


现在 , 编写 HTML 模板 时 可 以 使 用 方 括号 作为 插值 分 隔 符 了 。 例 如 ， 下 面 是 本 章 样 例 
代码 中 的 custom_delimiters.html 样 例文 件 : 


<div ng-controller="MyController"> 
<h1> 
This app uses 
<em> [[delimiter]]</em> 
as interpolation delimiters 
</Vh1> 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript"> 
var myModule = angular.module('myModule', []); 


myModule .config (function ($interpolateProvider) { 
$interpolateProvider.startsymbol('[['); 
$interpolateProvider.endSymbol1 (']]'); 

D; 


function MyController($scope) { 
$scope.delimiter = 'square braces'; 
} 
</script> 


函数 startSymbol 和 endSymbol 允许 设置 为 任何 自 定 义 分 隔 符 。 例 如 ，AngularJS 文档 
在 它 的 样 例 代码 中 使 用 // 作为 起 始 和 结束 分 隔 符 。 不 过 ， 大 多 数 应 用 不 设置 自 定义 分 隔 符 
的 原因 有 几 个 。 首 先 ， 大 多 数 AngularJS 开发 者 习惯 于 使 用 {{}}。 即 使 是 一 个 小 小 的 调整 ， 
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这 也 是 对 所 有 HTML 模板 的 小 小 调整 ， 这 将 为 代码 库 的 编写 增加 额外 的 阻碍 。 第 二 ， 与 方 
括号 或 者 斜 线 相 比 ， 花 括号 有 一 个 重要 的 优点 : URL 中 显 式 地 指出 不 允许 出 现 花 括号 (至 
少 RFC3986 中 关于 URL 的 技术 规范 是 这 样 描述 的 )。 换 句 话说 google.comy/[[]].html 从 技术 
角度 讲 是 一 个 有 效 的 URL， 但 是 google.com/{{}}.html 则 不 是 。 因 此 ， 在 使 用 花 括号 时 ， 
我 们 不 需要 担心 静态 URL 中 偶然 会 与 AngularJS 的 插值 相 混淆 。 

简单 地 说 ， 要 小 心 设置 自 定义 插值 分 隔 符 。 默 认 的 分 隔 符 对 于 大 多 数 应 用 来 说 都 是 正 
确 的 选择 。 不 过 ， 对 于 在 GO 编程 语言 的 服务 器 端 模板 库 中 使 用 AngularJS 这 样 的 用 例 来 
说 ， 自 定义 分 隔 符 也 是 不 可 缺少 的 。 
7.4.2 ”使 用 $compileProvider 的 白 名 单 链 接 

AngularJS 数据 绑 定 是 非常 强大 的 , 但 是 它 富 有 表达 力 的 特性 却 存在 着 安全 隐患 。 默 认 
情况 下 ，AngularJS 被 设计 为 避免 常见 的 漏洞 , 但 是 覆盖 默认 的 设置 很 容易 ， 而 且 如 果 不 小 
心 的 话 ， 可 能 会 无 意 中 将 用 户 公 开 给 恶意 JavaScript。 例 如 ， 请 考虑 下 面 这 段 看 似 无 害 的 
HTML: 


<a ng-href="{{goodLink}}">This is a link!</a> 


对 于 未 受过 培训 的 人 来 说 ， 这 可 能 是 安全 的 ， 但 是 当 看 到 这 样 的 代码 时 ， 警 报应 该 在 
你 的 脑海 里 响起 。 变 量 goodLink 可 能 将 毫 无 疑心 的 用 户 重 定向 至 任意 的 URL。 如 果 恶 意 
用 户 可 以 设置 googLink 变量 的 值 ， 那 么 他 们 可 以 通过 将 goodLink 变量 设置 为 类 似 于 下 面 
的 代码 ， 使 页 面 执行 任意 的 JavaScript: 


hackerLink = 'javascript:window.alert(\'You just got hacked!\')'; 


这 就 是 被 Web 开 发 者 称 为 跨 站 脚本 攻击 (简称 XSS) 的 典型 样 例 .默认 情况 下 , AngularJS 
将 通过 不 允许 使 用 javascript 为 开头 的 方式 保护 用 户 避 免 受到 这 种 攻击 。 特 别 是 ， 
$compileProvider 有 一 个 正则 表达 式 ， 它 将 使 用 这 个 表达 式 为 绝对 URL 添加 白 名 单 : 任何 
匹配 白 名 单 正则 表达 式 的 URL 都 被 认为 是 没 问题 的 ; 任何 不 匹配 的 URL 将 以 unsafe? 为 前 
级 ， 单 击 它们 不 会 重 定向 用 户 或 者 执行 任何 JavaScript。 记 住 ，AngularJS 将 在 检查 URL 是 
否 匹 配 白 名 单 正则 表达 式 之 前 ， 把 URL 转换 为 绝对 URL( 也 就 是 将 /path 转换 成 protocol:// 
domain/path)， 所 以 白 名 单 正则 表达 式 应 该 假设 目标 是 一 个 绝对 URL。 

可 以 使 用 $compileProvider 提供 者 的 aHrefSanitizationWhitelist() 函 数 获得 或 者 设置 白 名 
单 正则 表达 式 。 下 面 的 代码 来 自 本 章 样 例 代码 的 xss_vulnerable.html 文件 ， 它 演示 了 在 将 
白 名 单 正 则 表达 式 设 置 为 接受 所 有 字符 串 时 发 生 的 事情 : 


<div ng-controller="MyController"> 
<a ng-href="{{goodLink}}">Google!</a> 
<hr> 
<a ng-href="{ {okLink}}">Not Google</a> 
<hr> 
<a ng-href="{f{fhackerLink}}">XSS Link</a> 
</div> 
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<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript"> 
Var myModule = angular.module("'myModule', []); 


myModule .config (function($compileProvider) { 
$compileProvider.aHrefSanitizationWhitelist(/.*/); 


1D); 


function MyController($scope, S$http) { 
$scope.goodLink = 'http://www.google.com'; 
$scope.okLink = 'http://www.notgoogle.com'; 
$scope.hackerLink = 'javascript:window.alert(\'You just got 
hacked!\')'; 
} 
</script> 


尝试 单 击 XSS 链接 ， 一 个 警告 将 弹出 。 自 然 , 我 们 不 希望 恶意 用 户 在 用 户 的 浏览 器 中 
执行 任意 的 JavaScript。 默 认 情况 下 ，AngularJS 1.2.16 将 使 用 下 面 的 正则 表达 式 来 过 滤 白 
名 单 URL: 


/^\s*(https?|ftplmailtoltell|lfile):/ 

这 个 正则 表达 式 完成 了 一 个 合理 的 任务 , 用 于 阻止 之 前 XSS 样 例 这 样 的 漏洞 。 尤其 是 ， 
AngularJS 将 把 所 有 以 javascript 开 头 的 URL 都 添加 到 黑 名 单 中 ， 这 是 最 常见 的 XSS 漏洞 
来 源 。 当 在 浏览 器 中 打开 本 章 样 例 代码 中 的 xss_defaulthtml 文件 时 ， 将 会 看 到 开始 的 两 个 
链接 被 添加 到 白 名 单 中 ， 而 第 3 个 链接 (XSS 链接 ) 将 以 unsafe: 为 前 级 : 


<body> 

<div ng-controller="MyController"> 
<a ng-href="{{goodLink}}">Google!</a> 
<hr> 
<a ng-href="{{okLink}}">Not Google</a> 
<hr> 
<a ng-href="{{hackerLink}}">XSss Link</a> 

</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript"> 
Var myModule = angular.module('myModule’', []); 


myModule .config (function($compileProvider) { 
// Use default a[href] whitelist 
1D); 


function MyController($scope, S$http) { 
$scope.goodLink = "http://www.google.com'; 
$scope.okLink = 'http://www.notgoogle.com'; 
$scope.hackerLink = 'javascript:window.alert (\'You just got 
hacked!\')'; 
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g 
</script> 
</body> 


这 个 默认 的 行为 足以 满足 大 多 数 应 用 ， 但 是 你 可 能 希望 使 用 更 加 严格 的 白 名 单 ， 保 证 
用 户 不 会 链接 到 另 一 个 网 站 。 在 本 例 中 ， 白 名 单 正则 表达 式 是 非常 有 用 的 。 实 际 上 ， 可 以 


这 样 编写 正则 表达 式 : 只 有 属于 google.com 域 的 链接 才 可 以 访问 ， 恶 意 用 户 无 法 将 链接 重 


定向 至 Bing。 在 浏览 器 中 打开 本 章 样 例 代码 的 xss_extra_strict html 文件 , 将 看 
和 Not Google 链接 都 被 标记 为 不 安全 的 : 
<body> 


<div ng-controller="MyController"> 
<a ng-href="{{goodLink}}">Google!</a> 


<hr> 

<a ng-href="{{okLink}}">Not Google</a> 

<hr> 

<a ng-href="{{hackerLinklj">XSS Link</a> 
</div> 


到 XSS 链接 


<script type="text/javascript" src="angular.js"></script> 


<script type="text/javascript"> 
Var myModule = angular.module('myModule', []); 


myModule .config (function($compileProvider) { 


console.log ($compileProvider.aHrefSanitizationWhitelist()); 


$compileProvider.aHrefSanitizationWhitelist( 
/^https?:\/\/ (www\.)?goo0gle\.com(\/.*)?/i); 


]}) 7 

function MyController($scope, $http) { 
$scope.goodLink = 'http://www.google.com'; 
$scope.okLink = 'http://www.notgoogle.com'; 
$scope.hackerLink = 'javascript:window.alert (\'You just got 

hacked!\')'; 
} 
</script> 
</body> 


现在 我 们 已 经 成 功 地 让 应 用 中 的 链接 无 法 链接 到 除了 Google 之 外 的 任何 网 页 。 如 你 所 
见 ， 提 供 者 允许 完成 一 些 有 用 的 高 级 别 配 置 。 默 认 的 配置 对 于 大 多 数 应 用 都 是 足够 的 ， 但 
是 我 们 可 能 发 现 自己 需要 设置 自 定义 分 隔 符 或 者 禁止 特定 的 URL。 通 过 配置 块 和 提供 者 ， 


可 以 每 个 应 用 为 基础 做 出 这 些 配置 改动 。 
7.4.3 ”使 用 $rootScopeProvider 的 全 局 表达 式 属 性 


AngularJS 引起 混淆 的 最 常见 来 源 之 一 就 是 :表达 式 无 法 访问 全 局 作用 域 中 的 函数 和 属 


性 ,例如 encodeURIComponent。 在 第 4 章 “ 数 据 绑 定 ” 和 第 5 章 “ 指 令 ” 中 ， 
表达 式 是 通过 指令 ( 像 ngClick) 放 入 到 模板 中 的 JavaScript 代码 。 你 可 能 已 经 注 


我 们 学 到 了 
E 意 到 在 模板 
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中 使 用 下 面 的 代码 是 无 法 工作 的 ， 因 为 AngularJS 认为 encodeURIComponent 是 未 定义 的 : 
{{ encodqeURIComponent ('A, B, & C') }} 


第 4 章 已 经 讲解 了 如 何 编写 一 个 封装 encodeURIComponent 函数 的 过 滤器 ， 用 于 改善 

这 个 问题 。 不 过 , 还 有 一 种 简洁 的 方式 可 以 使 用 提供 者 和 配置 块 , 将 encodeURIComponent 
和 其 他 任何 值 或 者 函数 公开 给 所 有 的 模板 。 
AngularJS 有 一 个 称 为 grootScope 的 服务 。 你 可 能 已 经 猜 到 了 ， 这 个 服务 提供 了 对 页 面 
作用 域 层 次 中 根 作 用 域 的 访问 一 一 也 就 是 所 有 其 他 作用 域 的 祖先 。 特 别 是 ， 附 加 到 
S$rootScope 的 属性 在 页 面 的 所 有 作用 域 中 都 是 可 用 的 。 而 且 AngularJS 有 对 应 的 
$rootScopeProvider， 可 以 在 配置 块 中 访问 它 。 

不 过 ， 此 时 我 们 会 遇 到 一 个 小 小 的 困难 : 在 AngularJS 1.2.16 中 ，$rootScopeProvider 并 未 
公开 任何 配置 API。 换 名 话说，AngularJS 没 有 提供 正式 的 方式 可 以 配置 SrootScopeProvider。 
幸运 的 是 ， 如 你 在 本 章 之 前 所 学 到 的 ， 我 们 总 是 可 以 改写 $rootScopeProvider 中 的 $get 函 数 
返回 自己 的 服务 。 尽 管 这 种 方式 似乎 有 点 取 巧 ， 而 且 无 法 维护 ， 但 是 AngularJS 依 赖 注 入 器 
和 JavaScript 中 的 函数 是 第 一 类 成 员 这 个 事实 将 允许 这 样 做 ， 而 不 必 复 制 
$rootScopeProvider.$get 的 真正 实现 : 


汽 


<body> 
<div ng-controller="MyController"> 
{{ encodeURIComponent (stringToEncode) }} 
</div> 


<script type="text/javascript" src="angular.js"></script> 
<script type="text/javascript"> 
Var chapter7Module = angular.module('chapter7Module', []); 
chapter7Module .config(function ($rootScopeProvider) { 
Var oldGet = $rootScopeProvider.S$get: 
$rootscopeProvider.$get = function($injector) { 
Var rootScope = $injector.invoke (oldGet); 


rootscope.encodeURIComponent = encodeURIComponent; 
rootscope.stringToEncode = 'A, B, & C'; 


return rootscope; 
二 过 
3 


function MyController($scope) { 
} 
</script> 
</body> 
之 前 代码 的 基本 想法 是 oldGet 变量 是 一 个 指向 原始 SrootScopeProvider.$get 函数 的 指 
针 。 一旦 获得 了 这 个 指针 ， 就 可 以 使 用 依赖 注入 器 改写 SrootScopeProvider.$get 属性 ， 调 用 
原始 的 $get 函数 并 在 该 服务 中 附加 一 些 额外 的 属性 。 这 样 我 们 就 可 以 在 配置 块 中 使 用 所 选 
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择 的 方式 扩展 AngularJS 表达 式 。 


注意 : 

之 前 的 代码 演示 了 在 真正 的 AngularJS 应 用 中 ，S$injector 服 务 最 常见 的 应 用 。 在 使 用 
Sinjector 服 务 时 ， 正 如 之 前 代码 中 所 演示 的 ， 它 将 实现 “继承 ”效果 ， 例 如 通过 改写 提供 
者 的 $get 函 数 附加 属性 到 其 中 。 另 一 个 应 用 是 简化 控制 器 继承 : 运行 控制 器 函数 上 的 
$injectorinvoke， 将 控制 器 的 函数 和 属性 附加 到 当前 控制 器 的 Sscope 中 。 


7.5 小 结 


在 本 章 , 我 们 学 习 了 AngularJS 依赖 注入 器 、3 种 使 用 依赖 注入 器 注册 服务 的 方式 以 及 
使 用 提供 者 配置 AngularJS 的 一 些 简便 技巧 。 服 务 提供 了 一 个 方便 的 框架 ， 用 于 将 复杂 的 
代码 拆 分 为 较 小 的 、 更 容易 管理 的 块 。 尤 其 是 ， 因 为 依赖 注入 器 将 保证 任何 服务 最 多 只 有 
一 个 实例 ,所 以 将 服务 用 作 通 过 HTTP 请 求 从 远 端 服务 器 加 载 数据 的 封装 器 是 极其 有 用 的 。 

提供 者 是 服务 之 上 的 一 层 ， 它 将 使 用 config() 函 数 为 配置 服务 提供 一 个 API。 它们 对 于 
公开 选项 来 说 是 非常 有 用 的 ， 例 如 服务 应 该 从 哪个 服务 器 加 载 数据 。 另 外 ， 内 置 提供 者 允 
许 我 们 配置 核心 AngularJS 服务 。 

现在 我 们 已 经 学 习 了 如 何 创 建 服务 的 基础 知识 ， 以 及 它们 的 目的 ， 接 下 来 要 浏览 的 是 
所 有 AngularJS 应 用 的 内 部 结构 。 服 务 将 被 广泛 地 应 用 在 几乎 所 有 AngularJS 应 用 中 。 如 果 
发 现 了 一 个 应 用 不 使 用 服务 ， 那 么 它 可 能 通过 添加 一 些 良 好 设计 的 服务 ， 使 代码 得 到 极 大 
简化 。 
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本 章 内 容 : 
约定 和 它们 的 用 途 

如 何 使 用 $http 发 起 AJAX 调用 
使 用 HTTP 拦截 器 执行 错误 处 理 
如 何 通过 $resource 使 用 API 
使 用 StrongLoop LoopBack 的 REST 风格 API 的 最 佳 实践 
在 AngularJS 中 集成 Web 套 接 字 
使 用 Firebase 实现 实时 聊天 样 例 


本 章 的 样 例 代 码 下 载 : 
可 以 在 http:/www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文件 。 


8.1 将 要 学 习 的 内 容 


大 多 数 Web 应 用 都 需要 与 服务 器 进行 通信 。 无 论 是 从 公开 的 REST 应 用 编程 接口 加 载 
数据 ， 还 是 发 送 数据 到 服务 器 用 于 存储 ， 服 务 器 通信 都 是 应 用 获取 和 持久 化 数据 的 方式 。 
本 章 将 讲解 AngularJS 为 使 用 API 加 载 数据 所 提供 的 机 制 。 我 们 将 学 习 REST 风格 的 API 
基本 的 最 佳 实践 ， 并 使 用 StrongLoop 的 LoopBack 框架 生成 一 个 简单 的 NodeJS 后 端 API 
服务 器 。 我 们 还 将 学 习 AngularJS HTTP 拦截 器 ， 它 是 一 个 可 用 于 处 理 错误 的 强大 抽象 。 最 
后 , 我 们 将 学 习 两 种 使 用 AngularJS 构建 实时 应 用 的 机 制 : Web 套 接 字 和 Google 的 Firebase 
框架 。 
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注意 : 

在 词组 RESTAPI 或 者 REST 风格 的 API 中 , 你 可 能 已 经 听 到 过 术语 REST.。 它 代表 的 
是 表述 性 状态 转移 (Representational State Transfer), 这 是 设计 API 通 过 HTTP 进行 访问 时 使 
用 的 一 种 模式 。REST 最 基本 的 基本 原则 是 使 用 HTTP 方法 描述 资源 上 的 特定 操作 。 使 用 
POST 方法 将 告诉 服务 器 创建 资源 , GET 用 于 读 取 已 有 的 资源 , PUT 用 于 更 新 已 有 的 资源 ， 
DELETE 用 于 删除 已 有 的 资源 。 创 建 、 读 取 、 更 新 和 删除 操作 通常 被 缩写 为 CRUD 操作 。 


本 章 的 样 例 代码 将 使 用 NodeJS 作为 HTTP 请 求 和 Web 套 接 字 的 后 端 。 如 果 尚 未 安装 
NodeJS， 请 访问 nodejs.org/download， 然 后 执行 所 选择 操作 系统 对 应 的 安装 指令 。 在 使 用 
LoopBack 生成 REST API 时 ， 需 要 编写 少量 的 服务 器 端 JavaScript。 不 过 ， 在 其 他 小 节 中 ， 
不 需要 编写 任何 服务 器 端 JavaScript。 


8.2 约定 简介 


约定 (Promise) 是 一 个 对 象 ， 它 表示 了 在 未 来 某 个 时 间 点 计算 的 一 个 值 。 换 句 话说 ， 约 
定 是 一 个 用 于 处 理 异 步 操作 的 面向 对 象 结构 。JavaScript HTTP 请 求 是 异步 的 ， 这 意味 着 发 
出 HTTP 请 求 的 代码 可 以 继续 执行 ， 而 不 必 等 待 服务 器 返回 响应 。 与 用 于 处 理 异步 函数 的 
回调 或 者 事件 发 射 器 相 比 ， 约 定 提供 了 另 一 种 方便 的 选择 。 


注意 : 

在 本 书 撰写 时 , 两 个 最 常见 的 约定 规范 是 Promise/A+ 和 ECMAScript 6。 ECMAScript 6 
规范 实际 上 是 Promises/A+ 的 一 个 超 集 。 这 两 个 规范 是 可 以 互 操作 的 ，ECMAScript 6 规范 
所 指定 的 几 个 额外 的 函数 除外 ， 其 中 包括 catch0 和 all0。 由 AngularJS 的 $http 服务 返回 的 
约定 支持 ECMAScript 6 标准 的 大 部 分 功能 ， 还 有 一 些 方便 的 辅助 函数 。 约 定 目 前 是 一 个 
碎片 化 的 概念 ， 所 以 在 编写 代码 时 ， 不 应 该 假设 所 有 的 ECMAScript 6 约定 功能 都 是 可 
用 的 。 


约定 的 核心 功能 是 then0 函 数 。 该 函数 在 大 多 数 流行 的 JavaScript 约 定 库 中 都 是 通用 的 。 
它 将 接受 两 个 函数 参数 : onFulfilled 和 onRejected。 这 两 个 参数 都 是 可 选 的 : 如 果 onFulfilled 
或 者 onRejected 不 是 JavaScript 函数 ， 那 么 它们 将 被 忽略 。 这 两 个 函数 都 是 约定 所 支持 的 
状态 转移 的 处 理 程序 。 约 定 可 以 是 3 种 状态 之 一 : 等 待 、 完 成 或 者 拒绝 。 约 定 将 从 等 待 状 
态 开 始 ， 然 后 可 以 转换 成 完成 或 者 拒绝 状态 。 一 旦 约定 完成 或 者 被 拒绝 ， 它 就 无 法 再 改变 
状态 。 下 面 是 约定 基本 语法 的 一 个 样 例 : 


var pronmise = new Promise(); 
promise.then(function(v) { 
console.log(v); // Prints "Hello, world" 


]) 


promise.fulfill('Hello, world'); 
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注意 : 
约定 的 一 个 关键 功能 是 : 如 果 onFulfilled 函数 在 约定 已 经 完成 之 后 添加 ， 那 么 
onFulfilled 函数 必须 被 调用 。 换 和 句 话说， 如 果 将 之 前 样 例 中 的 then() 调 用 添加 到 一 个 
setTimeoutO) 函 数 中 ,之 前 的 代码 将 在 一 个 小 小 的 延迟 之 后 输出 “Hello，World”。 与 第 3 章 
“架构 ”中 大 量 使 用 的 事件 发 射 器 范例 相 比 ， 所 有 在 发 射 时 间 之 后 注册 的 监听 器 都 无 法 看 
到 该 事件 。 这 个 对 比 使 约定 成 为 封装 单个 异步 调用 的 更 佳 选 择 。 
函数 then() 将 返回 一 个 新 的 约定 ， 其 中 同时 封装 了 约定 和 传 给 then() 函 数 的 onFulfilled 


函数 。 特 别 是 ，onFulfilled 可 以 返回 一 个 约定 ， 而 通过 该 约定 则 可 以 把 异步 调用 串联 在 一 
起 。 例 如 ， 下 面 的 代码 将 在 1 秒 之 后 输出 “hello, world”( 全 部 都 是 小 写 ): 


Var promise = new Promise(); 


promise. 
then (function(v) { 
Var newPromise = new Promise(); 


setTimeout (function() { 
newPromise.fulfill (v.toLowerCase ()); 
}, 1000); 


return newPromise; 
}). 
then (function(v) { 
console.1log(v); 
]) 7 


promise.fulfill('Hello, world'); 


注意 第 一 个 then0 调 用 返回 了 一 个 约定 。 约定 足够 聪明 ， 可 以 知道 hen0 是 否 返 回 的 是 
一 个 约定 ， 该 库 在 将 值 传递 给 then() 链 之 前 ， 应 该 等 待 被 返回 的 约定 先 完成 。 

约定 是 AngularJS 中 与 HTTP 请 求 交互 不 可 缺少 的 一 个 工具 。 现 在 你 已 经 看 到 约定 的 
基本 概念 ， 接 下 来 应 该 学 习 AngularJS 中 HTTP 请 求 是 如 何 工 作 的 。 


8.3 ”发 起 HTTP 请求 的 服务 


如 之 前 所 描述 的 ，HTTP 代表 超 文本 传输 协议 。 你 可 能 已 经 从 网 络 地 址 中 识别 出 它 ， 
例如 http://google.com。HTTP 是 Web 浏览 器 (例如 Google Chrome) 与 服务 器 进行 通信 最 常 
见 的 机 制 。 例 如 , 每 次 访问 http://google.com 时 , 浏览 器 都 将 发 送 一 个 HTTP 请 求 到 Google 
的 服务 器 ， 并 接受 一 个 含有 Google 主页 HTML 的 响应 。HTTP 响应 中 几乎 可 以 包含 任意 
类 型 的 内 容 : HTML、 图 片 或 者 甚至 是 JavaScript Object Notation(JSON) 。 

HTTP 请 求 的 内 容 由 一 个 复杂 的 标准 所 管理 。 但 出 于 本 章 的 目的 ， 我 们 主要 关心 的 是 
与 HITP 请 求 相关 的 4 块 数据 。 第 一 块 数据 是 资源 ， 它 通常 是 统一 资源 定位 符 (URL) 在 域 
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名 之 后 的 部 分 。 例 如 , 当 使 用 浏览 器 访问 http://google.com/maps 时 , 发 送 给 Google 的 HITP 
请 求 将 资源 指定 为 /maps。 第 二 块 数据 是 方法 (有 时 被 称 为 动词 )， 它 必须 是 GET、HEAD、 
POST、PUT、DELETE、TRACE、OPTIONS、CONNECT 或 者 PATCH 中 的 一 个 。 这 些 方 
法 将 用 于 区 分 我 们 希望 在 指定 资源 上 执行 的 不 同 操作 。 例 如 ，POST 方法 通常 意味 着 我 们 
希望 创建 正在 请 求 的 资源 。 

第 三 块 信息 是 头 。HTTP 请 求 头 是 一 个 键 / 值 对 的 集合 ， 它 将 帮助 服务 器 解析 请 求 。 需 
要 使 用 哪个 HTTP 头 取决 于 所 使 用 的 服务 器 。 最 后 ，HTTP 请 求 包含 了 一 个 主体 ， 它 可 以 
为 请 求 保存 额外 的 数据 。 例 如 ， 在 使 用 POST 方法 时 ， 消 息 主体 通常 描述 了 希望 创建 的 资 
源 。 本 章 将 要 创建 的 HTTP 请 求 将 在 消息 主体 中 发 送 JSON。 

服务 器 将 使 用 HTTP 响应 回应 HTTP 请 求 。 响 应 包含 了 两 块 信息 ， 它 们 对 于 本 章 来 说 
是 非常 重要 的 。 第 一 个 是 状态 码 ， 它 描述 了 服务 器 是 如 何 处 理 请 求 的 。 每 个 状态 码 的 独特 
语义 是 一 个 深入 的 主题 ， 但 这 并 不 是 理解 AngularJS 中 服务 器 通信 的 关键 。 出 于 本 章 的 目 
的 ， 知 道 HTTP 状态 码 由 3 个 数字 组 成 即 可 ， 第 一 个 数字 表示 响应 的 高 级 语义 。 以 2 开头 
的 状态 码 (例如 200) 表 示 成 功 。 以 3 开头 的 状态 码 (例如 307) 表 示 请 求 资源 发 生 了 移动 。 以 
4 开头 的 状态 码 (例如 404) 表 示 请 求 是 无 效 的 。 以 5 开头 的 状态 码 (例如 500) 表 示 服 务 器 中 
产生 了 错误 。 因为 状态 码 必须 是 3 位 数字 ， 所 以 这 些 状态 码 类 通常 使 用 起 始 数 字 加 上 “xx” 
的 方式 进行 缩写 。 例 如 ， 以 2 为 开头 的 状态 码 通常 被 简写 为 “2xx 状态 码 ”。 

第 二 个 重要 的 信息 是 响应 体 ， 如 同 请 求 体 一 样 ， 它 包含 了 额外 的 数据 。 在 本 章 ， 响 应 
体 中 只 含有 JSON 数据 。 

浏览 器 允许 JavaScript 创建 和 执行 新 的 HITP 请 求 (本 节 稍 后 将 讲解 它 的 一 些 限制 )。 
AngularJS 有 两 个 封装 了 原生 浏览 器 XMLHttpRequest 类 的 服务 :$http 和 $resource。 服 务 Shttp 
级 别 相对 较 低 ， 它 公开 了 与 HITP 调用 相关 的 请 求 和 响应 抽象 。 服 务 $resource 级 别 更 高 ， 
它 提供 了 一 个 对 象 级 别 的 抽象 一 一 也 就 是 说 ， 从 服务 器 加 载 和 保存 对 象 (与 直接 发 出 请 求 相 
反 )。 它 们 都 是 通过 HTTP 与 服务 器 交互 的 ,在 接 下 来 的 两 节 中 ,我 们 将 学 习 $http 和 S$resource 
之 间 的 区 别 以 及 如 何 高 效 地 使 用 它们 。 

注意 ， 本 节 中 的 样 例 使 用 了 一 个 NodeJS 服 务 器 ， 用 于 提供 对 浏览 器 HTTP 请 求 的 响应 。 
为 了 运行 本 节 的 样 例 代 码 ， 请 先 从 本 章 样 例 代 码 的 根 目录 运行 npm install。 然 后 运行 node 
server.js 在 8080 端口 上 启动 HTTP 服 务 器 。 一 旦 启动 了 HTTP 服 务 器 ， 我 们 就 可 以 通过 网 址 
http://localhost:8080/interceptor_example_1.html 访 问 interceptor_example 1.html 样 例 了 。 


8.3.1 S$http 


S$http 是 AngularJS 对 原生 浏览 器 HTTP 请 求 的 低级 别 封装 器 。 在 本 节 ， 我 们 将 学 习 如 
何 使 用 $http 服务 创建 HITP 请 求 ， 以 及 如 何 使 用 HITP 拦截 器 配置 $http 服务 。 

S$http 服务 的 语义 是 非常 直观 的 : $http 服务 将 公开 几 个 函数 用 于 发 送 HTTP 请 求 到 服 
务 器 。 这 些 函 数 将 返回 一 个 从 服务 器 返回 的 HTTP 响应 的 一 个 约定 封装 器 ， 我 们 将 使 用 该 
约定 捕 提 服务 器 所 返回 的 数据 。 约定 是 与 Shttp 服务 交互 的 推荐 机 制 ， 这 就 是 为 什么 单独 使 

一 个 小 节 讲解 约定 的 原因 。 
与 本 书 的 其 他 许多 概念 一 样 ， 学 习 $http 约定 最 简单 的 方式 就 是 查看 一 些 基本 的 样 例 。 
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通常 ， 我 们 将 通过 调用 $http 服务 的 HTTP 方法 快捷 方式 与 它 交互 。$http 服务 有 对 应 于 
GET、HEAD、POST、 PUT、DELETE 或 者 PATCH HTTP 的 方法 , 它们 将 使 用 指定 的 HTTP 
方法 创建 新 的 请 求 (还 有 一 个 JSONP 辅助 函数 ， 稍 后 我 们 将 学 到 )。 例 如 ， 为 了 创建 一 个 新 
的 请 求 ， 使 用 GET 方法 访问 资源 /maps， 可 以 使 用 下 面 的 代码 : 


$http.get ('/maps'); 


函数 get0 将 返回 一 个 AngularJS HTTP 约定 ， 它 允许 我 们 捕捉 服务 器 最 终 的 响应 ， 以 
及 任何 可 能 发 生 的 错误 。 可 以 将 处 理 程序 附加 到 HTTP 约定 中 ， 如 下 所 示 : 


$http.get ('maps'). 
success (function (data, status, headers, config) { 

// data: 被 解析 的 响应 体 数据 

// status :响应 状态 码 

// headers: 作 为 JavaScript 映射 的 HTTP 响应 头 

// config: AngularJS http 请 求 配 置 对 象 

a status, headers, config) { 

// 这 里 的 参数 与 之 前 的 参数 有 着 相同 的 语义 
]) 

你 可 能 已 经 猜 到 了 , 当 HTTP 请 求 成 功 时 (也 就 是 说 服务 器 返回 了 一 个 2xx 状态 码 的 响 
应 ， 例 如 200)，AngularJS 将 执行 之 前 传 给 success() 的 函数 。 当 HTTP 响应 表示 失败 时 (也 
就 是 说 状态 码 以 4 或 者 5 开头 ， 例 如 400)， 那 么 AngularJS 将 执行 传 给 error() 的 函数 。 浏 
览 器 通常 会 遵循 重 定向 响应 (例如 状态 码 为 3xx 的 响应 ， 例 如 307)， 所 以 AngularJS HTTP 
处 理 程序 永远 也 不 应 该 看 到 HTTP 3xx 状态 码 。 

成 功 和 错误 处 理 程序 都 将 收 到 相同 的 参数 。 通 常 我 们 最 关心 的 是 data 参数 ， 其 中 包含 
了 解析 后 的 响应 体 。 出 于 本 章 的 目的 ,响应 体 将 总 是 JSON 数据 , $http 服务 将 自动 地 把 JSON 
解析 成 JavaScript 对 象 。 参数 status 包含 了 HTTP 响应 状态 码 , 它 可 能 对 于 解析 响应 是 非常 
有 用 的 。 参 数 headers 包含 了 HTTP 响应 头 ， 与 HTTP 请 求 头 一 样 ， 它 包含 了 一 个 可 以 帮 
助 解析 响应 的 键 值 对 。 最 后 ， 参 数 config 包含 了 原始 HTTP 请 求 的 配置 ， 包 括 方法 、 资 源 
和 任何 自行 添加 的 自 定义 头 。 
因为 在 JavaScript 中 ， 函 数 可 以 接受 的 参数 数量 是 非常 灵活 的 ， 所 以 在 成 功 或 者 错误 
处 理 程序 中 ， 可 以 忽略 最 后 一 些 参数 。 例 如 ， 只 接受 data 参数 的 成 功 或 者 错误 处 理 程序 是 
非常 常见 的 : 


$http.get ('maps'). 
success (function(data) { 
// 使 用 数据 
]}) - 
error (function (data) { 
// 使 用 数据 
DD); 


这 对 于 不 熟悉 JavaScript 的 开发 者 来 说 似乎 有 点 奇怪 ， 但 是 可 以 使 用 任意 数量 的 参数 
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调用 任何 JavaScript 函数 。 即 使 AngularJS 向 处 理 程序 中 传 入 了 4 个 参数 ,处 理 程序 仍然 可 
以 是 只 接受 单个 参数 的 函数 。 


注意 : 

注意 在 AngularJS $http 服务 的 上 下 文中 ， 术 语 “ 约 定 ” 被 使 用 得 有 点 宽泛 。S$http 服务 
的 约定 通常 使 用 的 语法 与 之 前 “约定 简介 ”一 节 中 学 到 的 语法 不 同 。 不 过 ，$http 服务 约定 
从 技术 角度 讲 与 Promises/A+ 规 范 和 ECMAScript 6 规范 是 兼容 的 。 例 如 ， 指 定 一 个 函数 血 
= function(data) 他， 那么 常见 的 $Shttp.get(Vtest).success(fp) 语 法 等 同 于 $http.get(Vtest).then 
(function(res) { fn(res.data): }). 


1. 设置 HTTP 请 求 体 


通常 ，HTTP GET 请 求 不 设置 请 求 体 。 不 过 ， 在 REST 风格 飞 范例 中 ，POST 请 求 被 
用 于 创建 新 的 资源 。 而 且 描 述 POST 请 求 希望 创建 的 资源 的 推荐 方式 是 在 请 求 体 中 使 用 
JSON。 服 务 $http 将 使 请 求 体 的 设置 变 得 非常 简单 。 假 设 我 们 希望 使 用 JSON 数据 { name: 
'AngularJS' } 发 出 一 个 POST 请 求 到 服务 器 。 那 么 可 以 编写 如 下 所 示 的 请 求 : 


Var body = { name: 'RngularJS' }; 


$http.post('/test', body). 
success (function(data) { 
// 采用 与 get 相同 的 方式 处 理 响应 
DD); 
注意 , 我 们 必须 传递 一 个 JavaScript 对 象 作为 $http.post() 函 数 的 第 二 个 参数 ， 而 不 是 一 
个 JSON 字符 串 。$http 服务 将 负责 自动 将 对 象 转换 成 字符 串 。 


2. JSONP 和 跨 站 脚本 攻击 (XSS) 


浏览 器 HTTP 请 求 通常 令 新 的 Web 开发 者 感到 吃惊 的 一 个 重要 限制 是 : 无 法 向 不 同 的 
域 发 起 HTTP 请 求 。 例 如 ， 如 果 JavaScript 在 foo.com 域 的 页 面 中 执行 ， 就 只 能 向 foo.com 
域 中 的 URL 发 送 HITP 请 求 。 例 如 ， 可 以 使 用 $http 服务 请 求 foo.comyresourcel 或 者 
subdomain1.foo.comy/resource2。 这 是 现代 浏览 器 中 国有 的 一 个 安全 限制 。 

不 过 ， 通 过 一 种 受 限 的 方式 ， 可 以 在 JavaScript 实现 跨 域 请 求 。JSONP 或 者 “使 用 填 
充 的 JSON(JSON with padding)” 将 利用 “可 以 使 用 HIML script 标记 从 远 端 域 中 加 载 数据 ” 
的 这 个 实际 情况 。 从 根本 上 讲 ，JSONP 将 插入 一 个 script 标记 到 页 面 中 ， 服 务 器 会 使 用 包 
含 了 响应 数据 的 JavaScript 代码 作为 响应 。AngularJS 的 $http.jsonp() 函 数 为 实现 JSONP 抽 
象 出 了 客户 端 代 码 。 只 要 远程 服务 器 支持 JSONP， 就 可 以 使 用 $http.jsonpO 以 使 用 其 他 Shttp 
帮助 函数 相同 的 方式 发 送 HITP 请 求 到 远程 服务 器 。 例 如 ， 第 7 章 “ 服 务 、 工 厂 和 提供 者 
的 样 例 代码 使 用 JSONP 从 Yahool Finance API 加 载 了 数据 ， 该 API 运行 在 一 个 远 端 域 中 : 


S$http.jsonp ('http://query.yahooapis.com/v1/public/ydql') . 
success (function (data) { 
]}) - 
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error (function (data) { 

DD); 
注意 ， 远 程 服务 器 必须 被 配置 为 支持 JSONP。 并 非 所 有 的 REST API 都 支持 JSONP; 
之 前 的 样 例 可 以 工作 ， 是 因为 Yahoo! Finance API 被 配置 为 支持 JSONP。 


3. HTTP 配置 对 象 


本 章 到 目前 为 止 , 我 们 已 经 使 用 了 Shttp 服 务 的 辅助 函数 , 例如 get() 和 post()。 不 过 , $http 
服务 将 公开 一 组 非常 通用 的 可 配置 参数 。 尤 其 是 ， 可 以 使 用 这 些 配 置 对 象 设置 例如 HTTP 
头 、 请 求 体 以 及 是 否 使 用 AngularJS 请 求 缓存 这 样 的 参数 。 事 实 上 ，S$http 服 务 自身 是 一 个 接 
受 单 个 参数 的 函数 : 请求 配置 对 象 。 例 如 ， 下 面 代码 中 的 两 个 HTTP 调 用 是 等 同 的 : 

// 使 用 .get () 辅助 函数 . . . 


Shttp.get('/test') . 
success (function (data) {1}); 


// 与 使 用 'method: 'GET' ' 向 Shttp () 函数 中 传递 配置 选项 是 一 样 的 
$http({ method: 'GET', url: '/test' }) . 
success (function (data) {}); 


S$http 服务 支持 诸多 配置 选项 。 最 常用 的 配置 选项 如 下 所 示 : 
e method 一 HTTP 方法 字符 串 : GET、 POST、 PUT、DELETE、HEAD 或 者 JSONP。 
e ur 一 一 绝对 URL 或 者 资源 字符 串 ， 例 如 Vtest 。 
e params 一 一 表示 查询 参数 的 JavaScript 对 象 或 者 字符 串 ， 将 以 URI 编码 的 形式 添加 
到 URL 末尾 。 例 如 ，{ a: 1.b: 2 } 将 以 "?a=1&b=2" 的 形式 添加 到 URL 末尾 。 
e@ data 一 JavaScript 对 象 的 请 求 体 。 
@ headers 一 一 代表 HTTP 头 映射 的 JavaScript 对 象 。 例 如 ， 传 入 { a: 1, b: 2 } 将 创建 一 
个 含有 两 个 头 的 HTTP 请 求 : 头 a 和 b 分 别 对 应 于 值 1 和 2。AngularJS 将 忽略 值 为 
null 或 者 undefined 的 属性 。 
e timeout 一 一 在 触发 错误 处 理 程序 之 前 ， 需 要 等 待 响应 的 毫秒 数 。 除 了 指定 毫秒 数 ， 
还 可 将 该 属性 设置 为 一 个 约定 。 当 约定 完成 时 ， 除 非 它 已 经 收 到 了 响应 ， 否 则 请 求 
将 会 超时 。 
除了 直接 传递 配置 到 $http() 函 数 中 ， 还 可 以 在 $http 服务 的 辅助 函数 中 设置 配置 选项 。 
S$http.getO 函 数 将 接受 第 二 个 参数 : 配置 对 象 。 例 如 ， 可 以 设置 GET 请 求 的 查询 参数 和 头 
信息 ， 如 下 所 示 : 
// GET /test?q=AngularJS,， "user" 头 设置 为 "mobile" 
$http.get ('/test', 
和 
Params: { 9: "AngularJS' }, 


headers: { user: 'mobile' } 
]) 


S$http post0 和 $http putO) 函 数 将 接受 配置 对 象 作为 第 三 个 参数 (在 请 求 体 之 后 ): 
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// POST /test?q=AngularJS， 将 "user" 头 设置 为 “mobile”， 
// 并 将 "{ 'data': 'sample'}" 用 作 请 求 体 
$http.post('/test', 
{ 
data: "Sample' 
}, 
{ 
params: { q: "AngularJS' }, 
headers: { user: 'mobile' } 
]) 


4. 设置 默认 的 HTTP 头 
尽管 我 们 不 依赖 于 本 章 样 例 中 的 自 定义 HTTP 头 ， 但 是 许多 项 目 都 会 依赖 于 头 ， 例 如 


身份 验证 这 样 的 用 例 。 如 果 项 目 中 要 求 发 送 自 定义 头 ， 那 么 我 们 应 该 知道 AngularJS 提供 
了 几 种 方式 ， 用 于 在 HTTP 请 求 中 附加 自 定义 头 。 尤 其 是 ， 在 AngularJS 中 有 4 种 方式 可 
以 在 HITP 请 求 中 添加 头 。 


首先 ,可 以 使 用 $http 服务 在 每 个 HITP 请 求 上 设置 头 。 这 是 设置 HTTP 请 求 头 时 粒度 


最 细 的 方式 : 


Eg 


$http.get ('/maps', 
{ headers: { myHeaderKey: 'myHeaderValue' } }); 


Shttp 服务 还 有 一 个 defaults headers 对 象 ， 它 定义 了 添加 到 所 有 HTTP 请 求 中 的 头 。 通 


， 我 们 将 在 run0) 块 中 与 该 对 象 交 互 。 例 如 : 


Var myModule = angular.module('myModule'); 
myModule.run(function($http) { 
$http.defaults.headers.common.myCustomHeader = 
'myCustomHeaderValue'; 
1); 


第 二 种 方法 将 为 所 有 的 HITP 请 求 设置 myCustomHeader 头 , 无 论 使 用 的 是 什么 方法 。 


不 过 ，defaults.headers 对 象 有 几 个 其 他 属性 。 例 如 ， 可 以 操作 defaults.headers 对 象 ， 只 为 
方法 是 GET 的 HTTP 请 求 设置 默认 的 头 : 


Var myModule = angular.module('myModule'); 
myModule.run(function($http) { 
$http.defaults.headers.get.myCustomHeader = 
"myCustomHeaderValue' 7 
]) 


可 以 设置 默认 HTTP 头 的 第 三 种 机 制 是 使 用 S$httpProvider 提供 者 。 如 果 希 望 学 习 更 多 


服务 和 提供 者 之 间 的 区 别 ， 第 7 章 包 含 了 对 该 主题 的 深入 讨论 。 不 过 出 于 本 节 的 目的 ， 知 
道 只 可 以 在 config(O) 函 数 中 访问 ShttpProvider 提供 者 即 可 。 否 则 ， 它 的 语义 与 设置 $http 服 
务 上 的 defaults.headers 对 象 是 一 致 的 。 例 如 ， 要 使 用 ShttpProvider 为 所 有 方法 为 POST 的 
HTTP 请 求 设置 myCustomHeader 头 ， 请 使 用 下 面 的 代码 : 
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Var myModule = angular.module('myModule'); 
myModule.config(function($httpProvider) { 
$httpProvider.defaults.headers.post.myCustomHeader = 
'myCustomHeaderValue'; 
Ds 


在 HITP 请 求 中 附加 头 的 第 4 种 方式 涉及 AngularJS 在 执行 HTTP 请 求 和 响应 之 前 ， 
运行 它们 的 函数 的 能 力 。 这 个 功能 将 通过 HTTP 拦截 器 公开 出 来 ， 通 过 它 可 以 在 配置 时 定 
义 特 定 于 应 用 的 转换 。 拦 截 器 是 下 一 节 的 主题 。 


5. 使 用 HTTP 拦截 器 


拦截 器 是 AngularJS 中 定义 处 理 HTTP 请 求 的 应 用 级 别 规则 最 灵活 的 方法 。 该 定义 可 
能 听 起 来 有 点 模糊 ， 所 以 请 考虑 下 面 的 任务 : 假设 我 们 希望 将 HTTP 状态 码 附加 到 所 有 
HTTP 响应 中 ， 从 而 使 得 可 以 更 轻松 地 将 状态 码 绑 定 到 HTML 中 。 如 下 面 的 代码 所 示 ， 可 
以 轻松 地 将 状态 附加 到 所 有 的 HTTP 处 理 程序 中 : 


$http.get ('/sample.json'). 

success (function(data, status) { 
data.status = status; 
// 使 用 数据 

}) - 

error (function(data, status) { 
data.status = status; 
// 使 用 数据 

和 过 


不 过 ， 我 们 不 得 不 将 代码 data.status = status: 添 加 到 所 有 HTTP 处 理 程序 中 ， 这 是 重复 
性 的 而 且 容 易 出 错 。 通 过 拦截 器 ， 可 以 为 应 用 定义 一 个 通用 规则 ， 用 于 附加 HITP 状态 。 
可 以 在 本 章 样 例 代码 的 interceptor_example 1.html 文件 中 找到 下 面 的 代码 。 在 浏览 器 中 使 
用 http://localhost:8080/interceptor_example_1.html 打开 该 文件 时 ,不 要 忘记 我 们 需 运 行 node 
serverjs 启动 一 个 HITP 服务 器 : 


<script type="text/javascript"> 
var m = angular.module('myApp', []); 


m.config(function($httpProvider) { 
$httpProvider.interceptors.push(function() { 
return { 
response: function (response) { 
response.data.status = response.status; 
return response; 


m.controller('httpController', function($scope, $http) { 


AngularJS 高 级 编程 


Shttp.get('/sample.json') .success (function(data) { 
console.1og(JSON.stringify(data) ) 7 
Ds 
1); 
</script> 
如 之 前 的 代码 所 示 , HTTP 拦截 器 被 定义 为 ShttpProvider 提供 者 上 的 一 个 数组 。 因为 提 
供 者 只 可 以 在 config() 函 数 中 被 访问 ， 所 以 拦截 器 必须 定义 在 一 个 config() 函 数 中 。 拦 截 器 
自身 是 一 个 含有 一 个 (可 选 的 )response 函数 的 JavaScript 对 象 ， 它 定义 了 该 拦截 器 如 何 对 响 
应 进行 转换 。 这 个 函数 将 接受 单个 参数 : response 对 象 ， 它 包含 了 与 响应 相关 的 所 有 信息 ， 
包括 响应 体 、 状 态 和 头 。 下 面 是 interceptor example 1.html 样 例 中 通过 HTTP 请 求生 成 的 
response 对 象 。 


{ 
人 
"success" : true 
}, 
"status": 200, 
oontfiq"s 贡 
"method": "GET"， 
"transformRequest": [ 
null 
], 
"transformResponse": [ 
null 
], 
"url": "/sample.json", 
"headers": { 
"Accept": "application/json, text/plain, */*" 
} 
}, 
"statusText": "OK" 
} 


上 面 突出 显示 的 代码 展示 了 定义 响应 体 、 状 态 和 头 的 位 置 。 可 以 通过 response.data 访 
问 响应 体 ， 使 用 response.status 访问 状态 ， 使 用 response.config headers 访问 头 。 


注意 : 

响应 对 象 的 statusText 属性 包含 了 等 同 于 数字 HTTP 状态 的 标准 文本 (参见 IETF RFC 
2616 的 6.1.1 小 节 )。 例 如 ， 响 应 状态 200 意味 着 statusText 将 是 OK， 反 之 亦 然 。 所 有 其 他 
响应 状态 都 有 分 别 对 应 的 statusText; 例如 404 对 应 于 Not Found。 


注意 ，response 函数 必须 返回 修改 后 的 响应 ; 它 为 拦截 器 增加 了 额外 的 灵活 性 。 换 句 
话说 ，response 函数 可 以 返回 一 个 全 新 的 HITP 响应 。 实 际 上 ，AngularJS 支持 response 函 
数 返回 一 个 约定 ， 这 意味 着 拦截 器 甚至 可 以 发 起 额外 的 HITP 请 求 ， 并 使 用 这 些 响应 。 不 
过 ,小 心 不 要 越界 , 在 拦截 器 中 发 起 HITP 调用 : 可 能 会 很 容易 就 阻塞 在 一 个 无 限 循 环 中 ， 
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因为 拦截 器 将 在 所 有 的 HTTP 请 求 上 执行 。 


请 求 拦截 器 

拦截 器 既 可 以 转换 HTTP 响应 ， 也 可 以 转换 HTTP 请求。 拦截 器 可 以 定义 一 个 request 
函数 ， 它 将 接受 HITP 请 求 配置 作为 参数 。 如 同 response 函数 一 样 ，request 函数 必须 返回 
修改 后 的 HTTP 请求。 

请 求 拦截 器 的 一 个 常见 用 例 是 为 每 个 请 求 设置 HTTP authorization 头 。 换 名 话说， 可 以 
使 用 拦截 器 将 凭据 附加 到 所 有 请 求 中 (尽管 实际 上 是 否 需 要 这 样 做 取决 于 服务 器 )。 这 个 用 
例 强调 了 拦截 器 的 另 一 个 重要 功能 : 拦截 器 被 绑 定 到 了 依赖 注入 , 所 以 它们 可 以 访问 服务 。 
这 是 特别 优雅 的 ， 因 为 如 第 3 章 所 示 ， 追 踪 当 前 登录 用 户 最 好 使 用 服务 完成 。 下 面 的 样 例 
代码 可 以 在 interceptor_ example 2.html 文件 中 找到 ， 它 定义 了 请 求 拦截 器 用 于 获得 凭据 的 


userService: 


var m = angular.module('myApp', []); 


m.factory('userService', function() { 
return { 
getAuthorization: function() { 
return 'This is a fake authorization'; 
} 
} 
}) 


m.config(function($httpProvider) { 
$httpProvider.interceptors.push (function (userService) { 
return { 
request: function(request) { 
request.headers.authorization = 
userService.getAuthorization(); 
return request; 
}, 
response: function (response) { 
response.data.status = response.status; 
return response; 
} 
} 
1); 
1 


之 前 定义 的 拦截 器 将 从 依赖 注入 器 中 接收 userService， 并 使 用 它 生成 凭据 。 然 后 拦截 
器 将 把 这 些 凭据 附加 到 请 求 的 authorization 头 中 。 多 亏 了 优雅 的 依赖 注入 ， 即 使 HITP 请 
求 现在 可 以 与 userService 进行 交互 ，interceptor _example 1.html 样 例 中 的 httpController 代 
码 也 不 需要 改变 : 


m.controller('httpController', function($scope, $http) { 
$http.get ('/sample.json') .success (function(data) { 
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console.10g(JSON.stringify(data)); 
$scope.data = data; 
1D); 
17D); 


HTTP 请 求 拦截 器 最 常见 的 用 例 就 是 添加 HTTP 请 求 头 。 不 过 ， 拦 截 器 也 可 以 修改 请 
求 的 方法 、 请 求 体 或 者 甚至 是 它 的 资源 。 下 面 是 interceptor_example 2.html 样 例 中 被 传 入 
到 请 求 函数 中 的 请 求 参数 ， 

{ 

"method": "GET", 

"transformRequest": [ 
null 

]， 

"transformResponse": [ 
null 

]， 

"url": "/sample.json", 

"headers": { 
"Accept": "application/json, text/plain, */*" 

} 

} 


之 前 所 示 的 method、url 和 head 属性 分 别 对 应 于 请 求 的 方法 、 资 源 和 头 。 请 求 体 ， 如 
果 有 的 话 ， 它 将 被 包含 在 data 属性 中 ， 可 以 通过 request.data 访问 。 不 过 ，GET 请 求 (以 及 
HEAD 请 求 ) 通 常 没 有 请 求 体 ， 所 以 在 之 前 的 样 例 中 data 属性 是 未 定义 的 。 


注意 : 

在 其 他 指南 中 , 你 可 能 看 到 过 authorization 头 被 称 为 Authorization 头 . RFC 2616 的 4.2 
小 节 指 定 了 HTTP 头 名称 是 大 小 写 不 敏感 的 ， 所 以 这 两 个 头 是 等 同 的 。 无 论 使 用 大 写 版 本 
的 还 是 小 写 版 本 的 都 只 是 个 人 选择 而 已 。 为 了 与 本 书 JavaScript 变量 命名 样式 一 致 ， 本 章 
将 使 用 小 写 版 本 (也 就 是 authorization) 。 


着 误 拦截 器 

也 可 以 使 用 拦截 器 捕 提 HITP 错误 。 拦 截 器 可 以 指定 requestError 和 responseError 函 
数 ， 它 们 将 分 别 被 调用 ， 用 于 处 理 请 求 错误 和 响应 错误 。 函 数 requestError 和 responseError 
将 与 约定 进行 交互 ， 而 不 是 直接 与 请 求 和 响应 交互 。 不 过 ， 这 些 函 数 将 使 用 AngularJS 的 
$q 服务 ， 它 是 流行 的 NodeJS 约定 库 Q 的 一 个 端口 。$q 服务 的 语法 与 Promises/A+ 规 范 更 
加 一 致 ， 所 以 不 要 惊讶 它 的 语法 与 Shttp 服务 生成 的 约定 不 同 。 


$q 服务 是 AngularJS 推荐 用 于 生成 约定 的 机 制 。 尽 管 拦 截 器 (在 理论 上 ) 是 兼容 于 其 他 
Promises/A+ 一 致 的 约定 库 的 ， 例 如 Q 和 Bluebird， 但 是 $q 服务 是 使 用 AngularJS 时 最 安全 
的 选择 。 

本 章 用 于 与 $q 服务 交互 的 主要 机 制 是 $q.defer0 函 数 。$q.defer0 函 数 将 返回 一 个 约定 对 象 ， 
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然后 我 们 的 异步 操作 可 以 在 该 对 和 象 上 调用 promise.resolve(value) 或 者 promise.resolve(error)。 


因为 requestError 和 responseError 函数 可 以 返回 约定 ， 所 以 可 以 使 用 额外 的 异步 调用 
从 错误 中 恢复 。 例 如 ， 本 章 使 用 的 样 例 将 从 会 话 超时 错误 中 恢复 。 假 设 用 户 保持 浏览 器 选 
项 卡 处 于 打开 状态 几 天 时 间 ， 而 且 用 户 的 会 话 过 期 了 。 那 么 下 一 次 当 该 用 户 尝试 保存 数据 
时 ， 服 务 器 将 告诉 他 用 户 未 登录 。 许 多 JavaScript 应 用 要 么 悄悄 地 失败 了 ， 要 么 选择 重 定 
向 用 户 。 不 过 ， 在 使 用 了 拦截 器 的 能 力 之 后 ， 我 们 的 应 用 可 以 更 加 优雅 地 处 理 这 个 任务 。 
为 使 用 错误 拦截 器 优雅 地 处 理会 话 超时 ，userService 需要 定义 一 个 异步 函数 ， 用 于 提 
示 用 户 登录 。 约 定 没 必 要 封装 异步 HTTP 调用 。 可 以 使 用 约定 封装 任何 异步 行为 一 甚至 
是 等 待 用 户 输入 密码 。 在 本 样 例 中 ， 我 们 将 把 userService 绑 定 到 一 个 简单 的 密码 提示 中 。 
可 在 本 章 样 例 代 码 的 interceptor_example 3.html 文件 中 找到 该 样 例 : 


var m = angular.module ('myApp', []); 


m.factory('userService', function($q, $rootSscope) { 
Var password = ''; 


Var service = { 
getAuthorization: function() { 
return password; 
}, 
authenticate: function() { 
Var promise = $q.defer(); 


$rootSscope.promptForPassword = true; 
S$rootScope.submitPassword = function(pwd) { 
$rootscope.promptForPassword = false; 
Password = pwd; 

promise.resolve (pwd); 


}; 


return promise.promise; 
} 
}; 


return service; 
Ws 
之 前 的 代码 定义 了 一 个 简单 的 异步 密码 提示 。 一 旦 任何 AngularJS 代码 调用 了 
userService.authenticate()， 提 示 将 被 显示 出 来 。authenticate0 函 数 会 返回 一 个 约定 ， 它 将 在 
HTML 调用 submitPassword0 函 数 时 完成 。 下 面 是 对 应 于 authenticate0 函 数 的 HIML: 


<div ng-if="promptForPassword"> 
<hr> 
<h2>Please Enter the Password</h2> 
<form ng-submit="submitPassword(password)"> 
<input type="text" ng-model="password"> 
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<input type="submit" value="Submit"> 
</form> 
</div> 
为 了 演示 HTTP 错 误 状 态 ， 正 在 被 用 作 HTTP 服 务 器 的 serverjs 文 件 将 定义 一 个 
POST/save 路 由 。 如 果 HTTP authorization 头 不 等 于 字符 串 Taco 的 话 ， 该 路 由 将 返回 HITP 
401( 未 授权 ) 状 态 。 下 面 是 修改 后 的 httpController 代 码 ， 用 于 发 送 HTTP POST 请 求 到 /save 
资源 : 
m.controller ('httpController', function($scope, $http) { 
$http.post('/save') .success (function (data) { 
console.1o0g(JSON.stringify (data)); 
$scope.data = data; 
17D); 
DD); 
当然 ， 需 要 定义 一 个 拦截 器 用 于 设置 authorization 头 。 幸 亏 ,“ 请 求 拦截 器 ”一 节 中 定 
义 的 请 求 拦截 器 足够 通用 ， 因 此 只 需 对 userService 做 出 改动 就 可 以 了 。 将 该 代码 绑 定 在 一 
起 , 并 在 出 现 HTTP 401 状 态 时 提示 用 户 输 入 密码 的 是 responseError 拦 截 器 , 代码 如 下 所 示 : 


m.config(function($httpProvider) { 
$httpProvider.interceptors.push (function($q, $injector, userService) 


return { 
request: function (request) { 
request .headers .authorization = 
userService.getAuthorization(); 
return request; 
}, 
response: function (response) { 
response.data.status = response.status; 
return response; 
}, 
responseError: function(rejection) { 
if (rejection.status === 401) { // 未 经 授权 
console.1og('Rejected because unauthorized with Password ' + 
userService.getAuthorization()); 


return userService.authenticate() .then (function() { 
return $injector.get('$http') (rejection.config); 
1D); 
} 


return S$q.reject (rejection); 
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如 你 所 见 ， 该 拦截 器 将 使 用 $q 服务 与 rejection 对 象 交 互 ， 并 返回 正确 的 约定 。 如 果 服 
务 器 返回 的 错误 不 是 HITP 401,， 那么 错误 拦截 器 将 忽略 该 错误 。 注意 , 我 们 仍然 需要 执行 
代码 retum $q.reject(rejection); 告 诉 AngularJS 拦截 器 : 指定 的 错误 未 做 任何 处 理 。 

当 服 务 器 返回 HTTP 401 时 ， 就 更 有 趣 了 。 在 本 例 中 ， 拦 截 器 将 激活 密码 提示 ， 并 等 
待 用 户 输入 密码 。 拦 截 器 将 返回 一 个 全 新 的 约定 : 由 userService.authenticate() 返 回 的 约定 。 
注意 ， 通 常 我 们 会 使 用 模 态 框 (一 个 JavaScript 弹出 框 ) 提 示 用 户 登录 。 第 10 章 “ 继 续 
前 行 ? 将 详细 讲解 AngularJS-UI Bootstrap 模 态 框 , 它 是 与 拦截 器 API 集成 的 一 个 完美 选择 。 
为 将 Angular-UI Bootstrap 的 Smodal 服务 与 拦截 器 相 集 成 ， 只 需要 知道 它 众多 功能 中 的 两 
个 即 可 。 第 一 ，$modal 服务 有 一 个 .open() 函 数 ， 它 将 接受 一 个 配置 对 象 ， 在 其 中 可 以 指定 
一 个 模板 和 控制 器 。 第 二 ，$modal.open() 的 返回 值 有 一 个 result 属性 ， 它 是 对 用 户 关 闭 模 
态 框 的 约定 封装 器 。 下 面 的 样 例 代码 演示 了 如 何 使 用 $modal 服务 的 约定 返回 值 与 HITP 拦 
截 器 进行 集成 。 可 在 本 章 样 例 代码 的 interceptor_example_modal.html 文件 中 找到 该 样 例 : 


m.factory('userService', function($q, $injector) { 
Var password = "'" 
Var service = { 
getAuthorization: function() { 
return password; 
}, 
authenticate: function() { 
Var $modal = $injector.get('$modal’'); 
Var modal = $modal .open({ 
template: '<div style="padding: 15px">' + 
<input type="password" ng-model="pwd">' + 
<button ng-click="submit (Pwd) ">' + 
Submit' + 
</button>' + 
'</div>', 
controller: function($scope, $modalInstance) { 
$scope.submit = function(pwd) { 
$modalInstance.close (pwd); 
}; 
b 
DD); 
return modal.result.then(function(pwd) { 
Password = pwd; 
和 和 六 
} 
}; 
return service; 
]) 


错误 拦截 器 返回 了 一 个 约定 ， 它 将 执行 两 个 操作 。 首 先 ， 它 将 调用 
userService.authenticate0)， 并 等 待 用 户 输入 密码 。 然 后 ， 一 旦 用 户 输入 了 密码 ， 拦 截 器 将 使 
用 rejection.config 对 象 ,“ 重 试 ”原来 的 HTTP 请 求 。 只 要 用 户 一 直 输入 的 是 错误 密码 ， 那 
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么 服务 器 将 继续 返回 HTTP 401 错误 ， 请 求 拦截 器 也 将 继续 保存 原来 的 HITP 请 求 ， 直 到 
用 户 输入 正确 的 密码 。 这 意味 着 用 户 不 需要 离开 页 面 重 新 输入 密码 ， 因 此 如 果 会 话 超时 他 
们 也 不 会 丢失 数据 。 与 重 定向 用 户 到 登录 页 面 并 清空 用 户 的 表单 数据 相 比 ， 这 是 一 个 巨大 
的 改进 。 

8.3.2 ”S$resource 服务 


S$resource 服务 是 对 $http 的 一 个 高 级 抽象 , 通过 它 可 以 在 从 服务 器 加 载 的 对 象 的 抽象 上 
进行 操作 ， 而 不 是 在 每 个 HTTP 请 求 和 响应 的 级 别 上 。Sresource 服务 允许 为 REST API 创 
建 一 个 方便 的 封装 器 ， 通 过 它 可 以 执行 CRUD 操作 ， 而 不 必 直 接 创建 HTTP 请 求 。 换 句 话 
说 ， 可 以 使 用 Sresource 服务 的 save0 函 数 创建 一 个 对 象 ， 该 函数 将 自动 创建 正确 的 HTTP 
POST 请 求 (而 不 是 创建 一 个 JSON 对 象 )， 然 后 使 用 方法 POST 创建 一 个 HTTP 请 求 , 用 于 
持久 化 对 象 到 服务 器 。 


注意 : 

Sresource 服务 不 是 AngularJS 核心 的 一 部 分 。 为 了 使 用 它 , 必须 包含 angular-resource.js 
文件 ,并 在 ngResource 模块 中 添加 一 个 依赖 .为 了 方便 起 见 ,angular-resourcejs 文 件 的 1.2.16 
版 本 已 经 被 包含 到 了 本 章 的 样 例 代码 中 。 


Sresource 服务 自身 是 一 个 函数 ， 它 将 创建 这 些 REST API 封装 器 对 象 。$resource 默认 
情况 下 将 使 用 严格 的 REST 规范 ， 但 是 可 以 扩展 它 ， 从 而 使 它 可 以 符合 几乎 所 有 REST 风 
格 的 API。 许多 API 都 使 用 REST 风格 的 规范 , 但 并 未 定义 完整 的 REST API。 例如 Twitter 
APIv1.1( 本 节 将 会 使 用 到 它 ) 没 有 提供 可 以 更 新 推 特 的 路 由 。 而 且 ， 删 除 一 条 推 特需 要 使 用 
POST 请 求 ， 而 不 是 DELETE 请 求 。 除 了 搭建 REST API， 通 过 $resource 还 可 以 基于 奇异 
的 API( 例 如 Twitter APD 创 建 一 个 抽象 层 。 

Sresource 函数 的 签名 如 下 所 示 。 注 意 方 括号 意味 着 参数 是 可 选 的 ， 可 以 被 忽略 掉 : 


$resource (url, [paramDefaults], [actions], options); 


该 函数 将 返回 一 个 资源 对 象 ， 它 有 一 组 称 为 操作 的 函数 。 每 个 操作 对 应 着 HTTP 请 求 
的 不 同 分 类 。 换 句 话说， 可 以 通过 指定 HTTP 配置 (Shttp() 函 数 的 参数 ) 定 义 一 个 操作 。 使 操 
作 如 此 强大 的 关键 功能 是 : HTTP 配置 是 参数 化 的 。 例如， 下 面 的 tweetService 公开 了 一 个 
称 为 load0 的 函数 ， 它 将 从 服务 器 加 载 指定 的 推 特 信息 。 在 本 章 样 例 代码 的 resource_ 
basic html 文件 中 可 以 找到 下 面 的 代码 : 


var m = angular.module('myApp', ['ngResource']); 


m.service('tweetService', function($resource) { 
return S$resource('/tweets/:id', 
{hs 
{ 
load: { method: 'GET' } 
1D); 
]) 
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m-controller ('tweetController'，function (tweetService) { 
// This performs an HTTP request: GET /tweets/123 
Var tweet = tweetService.load({ id: '123' }, function() { 
console.log(JSON.stringify (tweet)); 
Ds; 
]) 


之 前 的 tweetService.load(0) 函 数 实际 上 将 创建 一 个 发 送 到 /tweets/123 的 GET 请 求 。 通 过 
$resource 服务 可 以 指定 URL 中 的 路 由 参数 (tweets/:id 中 的 :id 就 是 一 个 路 由 参数 )。 如 果 曾 
经 使 用 过 像 Ruby on Rails 或 者 Express 这 样 的 服务 器 端 框架 ， 或 者 已 经 阅读 了 第 6 章 “ 模 
板 、 位 置 和 路 由 ” 那么 就 应 该 熟悉 $resource 的 路 由 参数 概念 。$resource 服务 将 在 URL 中 
寻找 路 由 参数 ， 然 后 从 传 给 操作 函数 的 对 象 中 提取 对 应 的 值 。 


注意 : 

在 之 前 的 样 例 中 ， 我 们 把 tweet 变量 设置 为 load() 函 数 的 返回 值 。 然 后 在 load(0) 函 数 的 
回调 中 使 用 该 tweet 变量 。 这 是 AngularJS 代码 中 常见 的 设计 模式 。 操 作 函 数 将 返回 一 个 空 
对 象 ， 并 追踪 该 对 象 的 引用 。 当 HTTP 请 求 返回 时 ，S$resource 将 把 服务 器 响应 中 的 属性 复 
制 到 空 对 象 中 。 


除了 URL 中 的 路 由 参数 ， 还 有 两 种 方式 可 以 参数 化 请 求 。 通 过 $resource 服务 可 以 定 
义 如 何 创建 查询 参数 和 路 由 参数 默认 值 的 规则 。 


注意 : 

路 由 参数 默认 值 是 Sresource() 函 数 的 第 二 个 参数 ， 当 调用 操作 函数 但 未 指定 所 有 路 由 
参数 时 将 用 到 它 。 例 如 ， 在 下 面 的 样 例 中 ， 因 为 控制 器 的 send() 调 用 未 指定 路 由 参数 ， 所 
以 $resource 服务 将 为 id 使 用 默认 值 。 如 果 默 认 值 是 一 个 函数 ，$resource 服务 将 执行 它 ， 
并 使 用 它 的 返回 值 。 


可 以 定义 将 被 Sresource 服务 调用 的 函数 ， 来 设置 查询 参数 和 URL 参数 默认 值 : 


m.service('tweetservice', function($resource) { 
var count = 0; 
return $resource('/tweets/:id', 
{ 
id: function() { 
return ++count; 
} 
}, 
{ 
send: { 
method: 'POST', 
url: '/tweets/:id/send', 
Params: { 
counter: function() { 
return count; 
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m.controller('tweetController', function(tweetService) { 
// 该 方法 将 执行 一 个 HTTP 请 求 : POST /tweets/1/send?counter=1 
Var tweet = tweetService.send(function() { 
console.1o0g(JSON.stringify (tweet)); 
1); 
]) 7 


为 尽量 减少 公式 化 代码 ，S$resource 服务 定义 了 5 个 默认 操作 。 我 们 定义 的 所 有 资源 都 
将 自动 得 到 下 面 5 个 操作 。 这 些 操作 对 应 于 严格 REST API 中 的 CRUD 操作 : 


{ "get' : {method: 'GET'}， 
'save': {method:"'POST'}, 
'query': {method:'GET', isArray:true}, 


'remove': {method:'DELETE"'}, 
"delete': {method:'DELETE'} }; 


S$resource 服务 有 两 个 微妙 之 处 。 首 先 ， 查 询 操作 的 配置 中 有 一 个 神秘 的 isArray 选项 。 
该 选项 意味 着 我 们 期 望 服务 器 返回 的 响应 是 一 个 数组 ， 所 以 query0) 函 数 返 回 的 对 象 将 是 一 
个 空 数组 。 当 它 从 服务 器 接收 到 HTTP 响应 时 ，S$resource 服务 将 该 数组 复制 到 它 返 回 的 数 
组 中 。 通 常 不 需要 使 用 isArray 选项 ， 因 为 许多 API 返回 的 都 是 对 象 ， 其 中 包含 数组 ， 而 
不 是 直接 使 用 整个 数组 。 

其 次 ，Sresource 服务 返回 的 对 象 不 只 是 一 个 静态 操作 的 集合 。 资 源 从 语义 上 讲 类 似 于 
像 Java 这 样 的 编程 语言 中 的 类 : 它们 有 静态 方法 ， 由 到 目前 为 止 我 们 所 使 用 的 操作 函数 表 
示 ， 但 是 它们 也 可 以 实例 化 。 而 且 ， 被 实例 化 的 资源 含有 实例 函数 ， 它 们 将 被 用 作 某 些 操 
作 函 数 的 辅助 函数 。 特 别 是 ，save()、remove() 和 delete() 函 数 (以 及 任何 其 他 方法 不 是 GET 
的 操作 ) 将 被 公开 为 资源 实例 上 的 辅助 方法 。 例 如， 在 下 面 的 样 例 中 ， 推 特 资 源 实例 中 有 一 
个 $send() 函 数 ， 它 将 自动 执行 POST 请 求 ， 将 推 特 对 象 作为 SON 保存 在 请 求 体 中 。 可 以 
在 本 章 样 例 代码 的 resource_instance.html 文件 中 找到 下 面 的 代码 : 


var m = angular.module('myApp', ['ngResource']); 


m.service('tweetSservice', function($resource) { 
return S$resource('/tweets/:id', 
{}, 
{ 
load: { method: 'GET"' }, 
send: { 
method: 'POST', 
url: '/tweets/:id/send' 
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1D); 


m.controller ('tweetController', function(tweetService) { 
// 该 方法 将 执行 一 个 HTTP 请 求 : GET /tweets/123 
Var tweet = tweetService.load({ id: '123' }, function() { 
console.10g(JSON.stringify (tweet)); 
// 该 方法 将 执行 一 个 HTTP 请 求 : PosT /tweets/123/send 
tweet.$send({ id: tweet.id }); 
DD); 
3 


现在 你 已 经 看 到 了 S$resource 服务 的 基本 功能 ， 接 下 来 将 应 用 这 个 知识 编写 自己 的 资 
特别 是 ， 我 们 将 编写 一 个 使 用 公开 Twitter REST API v1.1 的 一 部 分 的 资源 。 


8.4 使 用 Twitter 的 REST API 


在 本 节 ， 我 们 将 围绕 Twitter 的 部 分 REST API 编写 一 个 资源 封装 器 。 特 别 是 围绕 5 个 


常见 的 Twitter API 终端 编写 封装 器 ,它们 大 致 对 应 于 单个 推 特 的 CRUD 操作 。 这 些 终端 如 
下 所 示 : 


GET statuses/retweets/:1d 

GET statuses/show/:id 

POST statuses/destroy/:id 

POST statuses/update/:id 

® POST statuses/retweet/:id 

构建 这 个 资源 封装 器 将 帮助 我 们 加 深 对 Sresource 服务 的 理解 。 为 了 简单 起 见 (以 及 


Twitter REST API 不 支持 JSONP 这 个 事实 )， 本 章 样 例 代码 的 NodeJS 服务 器 为 这 些 终端 包 


含 了 


一 个 简单 的 服务 器 端 实现 。 
为 构建 一 个 使 用 该 API 的 资源 ， 首 先 需要 理解 这 些 API 终端 都 实现 了 什么 。 这 些 终端 


并 不 符合 严格 的 REST 规范 (例如 ， 删 除 一 条 推 特 实际 上 需要 执行 的 是 POST 请 求 )。 因 此 ， 
需要 做 一 些 额外 的 工作 ， 使 $resource 服务 与 该 API 进行 交互 : 


GET statuses/retweets/:id 终端 将 返回 一 个 转发 推 特 的 数组 。 

GET statuses/show/:id 终端 将 返回 一 条 推 特 。 

POST statuses/destroy/:id 终端 将 删除 一 条 推 特 。 

POST statuses/update/:id 终端 将 更 新 一 条 推 特 。 

@ POST statuses/retweet/:id 终端 将 创建 一 条 转发 推 特 。 

这 5 个 方法 的 资源 封装 器 将 如 下 所 示 。 可 以 在 本 章 样 例 代 码 的 resource twitterhtml 文 


件 中 找到 该 代码 : 


m.service('tweetSservice', function($resource) { 
return S$resource('/statuses/', 
{}, 
{ 
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retweets: { 
method: "GET'， 
url: '/statuses/retweets/:id', 
isArray: true 
}, 
show: { 
method: "GET' 
url: '/statuses/show/:id' 
}, 
destroy: { 
method: 'POST"', 
url: '/statuses/destroy/:id', 


params: { 
id: '@id' 
} 
}, 
update: { 


method: 'POST', 
url: '/statuses/update/:id', 
params: { 
id: "@id" 
} 
}, 
retwveet: { 
method: 'POST', 
url: '/statuses/retweet/:id', 
params: { 
id: '@id' 


Ws 


之 前 的 代码 有 一 个 新 功能 : @id 语法 。 该 语法 将 指示 S$resource 服务 把 id 路 由 参数 设置 
到 请 求 体 的 id 属性 值 上 。 例 如 ，tweetService.retweet({ id: '123' }) 将 发 送 一 个 到 /statuses/ 
retweet/123 的 POST 请 求 ， 请 求 体 中 使 用 的 是 { id: '123' }。 现 在 可 以 创建 一 个 用 于 加 载 
条 推 特 和 它 的 转发 者 的 控制 器 : 


m.controller('tweetController', function($scope, tweetService) { 
$scope.load = function() { 
$scope.tweet = tweetService.show({ id: '123456' }, function() { 
1); 
}; 


$scope.loadRetweets = function() { 
$scope.retweets = tweetService.retweets({ id: '123456"' }, 


function() {}); 
}; 
]) 
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你 可 能 已 经 注意 到 了 之 前 的 控制 器 并 未 公开 destroy0、update0 和 retweetO 函 数 的 封装 
器 。 尽 管 可 以 直接 使 用 这 些 函 数 ， 但 是 $resource 服务 还 公开 了 实例 辅助 函数 ,“S$resource 
服务 ”一 节 已 经 简单 地 进行 了 介绍 。 一 旦 获得 了 tweet 实例 ， 例 如 tweetService.show() 返 回 
的 实例 , 就 可 以 使 用 实例 的 $destroy()、$update() 和 $retweetO 辅 助 函数 。 调 用 tweet$destroy() 
辅助 函数 等 同 于 调用 tweetService.destroy(tweeb 。 例 如 ， 可 以 使 用 由 tweetController 公开 的 
API 实现 如 下 所 示 的 Retweet 按钮 : 


<button ng-click="tweet.$retweet () "> 
Retweet 
</button> 


tweet.$retweet() 调 用 将 被 翻译 成 一 个 发 送 到 /statuses/retweet/123456 的 POST 请 求 ， 并 
在 请 求 体 中 使 用 推 特 实例 的 JSON 表示 。 

恭喜 ! 你 已 经 成 功 实现 了 一 个 封装 了 部 分 真正 API 的 资源 封装 器 ! 现在 你 已 经 看 到 了 
Sresource 服务 如 何 让 使 用 API 这 件 事情 变 得 非常 容易 , 接 下 来 将 学 习 一 个 与 Sresource 服务 
集成 的 搭建 工具 : StrongLoop 的 LoopBack。LoopBack 是 一 个 用 于 生成 REST API 的 高 级 
工具 。 它 将 自动 生成 一 个 NodeJS 服务 器 ,并 为 RESTAPI 终 端的 生成 提供 问答 界面 。 如 你 
将 在 下 一 节 所 看 到 的 ，LoopBack 甚至 可 以 生成 AngularJS 资源 ， 使 用 它 自 己 创建 的 REST 
API 终端 。 


8.5 使 用 StrongLoop LoopBack 搭建 REST API 


至 此 ， 我 们 已 经 学 习 了 AngularJS 中 HTTP 请 求 的 基本 概念 。 不 过 ， 这 些 代码 到 目前 为 
止 只 是 与 简单 地 服务 器 后 端 进行 交互 。 这 是 因为 创建 自己 的 REST API 是 一 个 更 加 复杂 的 任 
务 ， 考 虑 构建 REST API 将 会 分 散 我 们 对 AngularJS HTTP 基 础 知识 进行 学 习 的 精力 。 不 过 ， 
为 看 到 这 些 基础 知识 在 实际 中 的 效果 ， 我 们 将 使 用 StrongLoop 的 LoopBack 框 架 快速 搭建 一 
个 以 NodeJS 为 后 端的 RESTAPI。 如 果 尚 未 安装 NodeJS， 请 访问 www.nodejs.org/download， 
并 执行 所 选择 的 操作 系统 对 应 的 指令 。 

LoopBack 是 一 个 NodeJS 工具 ， 它 将 自动 生成 REST API。 换 句 话说 ，LoopBack 可 以 
生成 NodeJS 代码 ， 而 该 代码 将 使 用 流行 的 NodeJS Web 框架 Express， 并 提供 一 个 简单 的 
命令 行 接口 ， 用 于 向 REST API 中 添加 模型 。 模 型 是 一 个 代表 了 数据 模式 的 对 象 。 例 如 ， 
一 个 用 户 模型 可 以 是 一 个 指定 存储 用 户 哪 些 数据 的 对 象 ， 例 如 指定 用 户 应 该 有 一 个 表示 电 
子 邮 件 地 址 的 字符 串 。LoopBack 将 创建 API 终端 (HTTP 资源 的 通用 类 )， 可 以 使 用 它们 在 
模型 实例 上 执行 CRUD 操作 。 模型 是 之 前 小 节 中 使 用 Sresource 服务 构建 的 资源 在 服务 器 端 
的 对 等 概念 。 

模型 与 数据 库 中 表 和 集合 的 概念 有 着 密切 的 关系 。 事实 上 , LoopBack 框架 的 一 个 关键 
优势 在 于 可 以 选择 4 种 不 同 数据 库 中 的 某 一 个 持久 化 模型 的 实例 : MongoDB、Oracle、 
MySQL 或 者 Microsoft SQL Server。 可 基于 模型 选择 数据 库 , 例如 可 以 在 MongoDB 中 存储 
用 户 ,但 是 在 MySQL 中 存储 金融 交易 。 也 可 以 选择 只 在 内 存 中 存储 模型 的 实例 。 出 于 本 
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章 的 目的 ， 我 们 将 只 使 用 内 存 存储 选项 ， 因 为 安装 和 创建 数据 库 对 于 本 样 例 来 说 是 不 必要 
的 开销 。 不 过 ， 如 果 机 器 上 已 经 安装 了 MongoDB， 那 么 可 以 使 用 REST API 把 数据 持久 化 
到 MongoDB 实例 中 。 实 际 上 ， 通 常 我 们 希望 将 模型 实例 存储 在 数据 库 中 ， 但 是 内 存 存 储 
选项 对 于 教学 目的 来 说 是 足够 的 。 


8.5.1 ”使 用 LoopBack 构建 简单 的 API 


本 节 将 使 用 LoopBack 为 存储 咖啡 的 商店 搭建 一 个 真正 的 REST API。 可 以 使 用 
LoopBack 创建 一 个 服务 器 端 模型 ， 然 后 使 用 LoopBack 的 AngularJS SDK 构建 出 对 应 的 
AngularJS $resource 服务 。 最 后 ,我 们 将 创建 一 个 简单 的 HTML 页 面 , 在 其 中 使 用 LoopBack 
AngularJS SDK 自动 生成 的 Sresource。 

为 安装 StongLoop LoopBack, 应 该 在 本 章 样 例 代码 的 loopback-coffee 目录 中 运行 npm 
install。 该 命令 将 在 node_ modules/strongloop/bin 目录 中 安装 各 种 LoopBack 命令 行 工具 。 
另外 ， 在 本 节 开 始 关注 LoopBack 意味 着 本 节 内 容 的 结束 ， 所 以 我 们 只 会 从 高 级 别 学 习 
LoopBack。 可 以 从 http://loopback.io 中 了 解 LoopBack 的 更 多 细节 。 在 本 章 ， 我 们 将 使 用 
LoopBack 框架 的 2.10.2 版 本 。 


1. 创建 新 的 应 用 


使 用 LoopBack 生成 RESTAPI 时 用 到 的 主要 命令 行 工具 是 slc 命令 .为 启动 创建 REST 
API 的 过 程 ， 从 本 章 样 例 代 码 的 根 目录 中 运行 .node modules/strongloop/bin/slc loopback 命 
令 。 你 应 该 看 到 下 面 的 提示 ， 根 据 这 些 提示 ， 可 以 通过 回答 一 些 简单 问题 的 方式 搭建 Web 
服务 器 。 将 应 用 命名 为 loopback-coffee: 


[?] What's the name of your application? loopback-coffee 
[?] Enter name of the directory to contain the project: loopback-coffee 


只 是 运行 一 个 命令 ， 我 们 就 已 经 创建 了 一 个 简单 的 REST API。 该 API 尚 没有 模型 ， 但 
如 果 运 行 .node modules/strongloop/bin/slc run 命 令 ， 并 在 浏览 器 中 访问 http://localhost:3000 
的 话 ， 应 该 可 以 看 到 显示 服务 器 已 经 运行 了 多 长 时 间 的 JSON 数 据 ， 如 下 面 的 数据 所 示 : 


{f"started":"2015-01-02T22:56:29.4542","uptime":4.47} 
2. 创建 LoopBack 模型 


可 以 运行 .node modules/strongloop/bin/slc loopback:model 命 令 创 建 一 个 新 模型 。LoopBack 
将 提出 几 个 问题 用 于 构建 模型 。 将 模型 命名 为 CoffeeShop( 复 数 为 CoffeeShops)。 出 于 本 节 
的 目的 ， 我 们 的 模型 将 包含 两 个 属性 name 和 address 一 一 都 是 字符 串 : 


Enter the model name: CoffeeShop 

Select the data-source to attach CoffeeShop to: db (memory) 
Select model's base class: PersistedModel 

Expose CoffeeShop via the REST API? Yes 

Custom plural form (used to build REST URL): CoffeeShops 
Let's add some CoffeeShop properties now. 


OO 
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Enter an empty property name when done. 
? Property name: name 
invoke loopback:property 
? Property type: string 
? Required? Yes 


Let's add another CoffeeShop property. 
Enter an empty property name when done. 
? Property name: address 

invoke loopback:property 
? Property type: string 
? Required? Yes 


Let's add another CoffeeShop property. 
Enter an empty property name when done. 
? Property name: 


这 就 是 创建 CoffeeShop 模型 及 其 对 应 REST API 所 需 的 全 部 工作 了 。 运 行 ./node 
modules/strongloop/bin/slc run 命令 启动 服务 器 ， 并 在 浏览 器 中 访问 http://localhost:3000/ 
api/CoffeeShops。 因 为 我 们 尚未 添加 任何 咖啡 店 ， 所 以 看 到 的 应 该 是 一 个 空 JSON 数组 。 


3. API Explorer 


LoopBack 默认 公开 一 个 强大 的 文档 和 配置 工具 ， 称 为 API Explorer。 在 浏览 器 中 访问 
http://localhost:3000/explorer， 我 们 应 该 可 以 看 到 服务 器 中 定义 的 模型 的 一 个 列表 。 现 在 应 
该 看 到 两 个 模型 : LoopBack 默认 生成 的 User 模型 和 之 前 小 节 生 成 的 CoffeeShops 模型 。 当 
单 击 CoffeeShops 模型 时 ， 应 该 看 到 新 的 REST API 所 支持 的 所 有 操作 的 一 个 列表 。 例 如 ， 
可 以 发 送 POST 请 求 到 /api/CoffeeShops， 用 于 创建 一 个 新 的 CoffeeShop 实例 ， 或 者 发 送 一 
个 GET 请 求 到 /apiCoffeeShops， 获 得 所 有 咖啡 商店 的 一 个 列表 。 


4. 使 用 LoopBack AngularJS SDK 生成 资源 


现在 我 们 已 经 为 咖啡 店 创建 了 一 个 REST API， 你 可 能 好 奇 AngularJS 何 时 出 现 。 使 用 
LoopBack 构 建 REST API 的 一 个 优点 是 lb-ng 可 执行 文件 ， 它 将 为 模型 生成 AngularJS 服 务 。 
换 句 话说，Ib-ng 可 执行 文件 将 自动 为 我 们 的 API 完 成 之 前 小 节 为 Twitter API 所 完成 的 事情 。 

为 运行 lb-ng 可 执行 文件 , 首先 在 client 目录 中 创建 一 个 js 目录 。 然 后 运行 下 面 的 命令 : 


./node modules/strongloop/node modules/loopback-sdk-angular-cli/bin/lb-ng \ 
./server/server.]s client/js/services.js 


就 是 它 ! 打开 client/js/services.js 文件 并 搜索 “CoffeeShop”。 你 将 看 到 LoopBack 基于 
Sresource 服务 构建 了 一 个 拥有 良好 文档 的 CoffeeShop 服务 。 文 件 services.js 拥有 超过 1600 
行 代码 , 但 不 要 担心 LoopBack 在 其 中 生成 了 大 量 的 注释 。CoffeeShop 服务 看 起 来 似乎 含 
有 大 量 代码 ， 但 90% 的 代码 其 实 都 是 注释 。 下 面 是 不 含 注释 的 CoffeeShop 服务 (为 了 可 读 
性 ， 对 它 进 行 了 格式 化 ): 
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module.factory( 
"CoffeeShop"， 
['LoopBackResource', 'LoopBackAuth', '$injector', 
function (Resource, LoopBackAuth, $injector) { 
Var R = Resourcel 
urlBase + "/CoffeeShops/:id", 
ty 
{ 
"create": { 
url: urlBase + "/CoffeeShops"， 
method: "POST" 
}, 
Tupsert™s « 
url: urlBase + "/CoffeeShops", 
method: "PUT" 
}, 
"exists": { 
url: urlBase + "/CoffeeShops/:id/exists", 
method: "GET" 
"findById": { 
url: urlBase + "/CoffeeShops/:id"， 
method: "GET" 
了 
“En 
isArray: true, 
url: urlBase + "/CoffeeShops", 
method: "GET" 


1 

"findone": { 
url: urlBase + "/CoffeeShops/findone", 
method: "GET" 

}, 

"updateAll": { 
url: urlBase + "/CoffeeShops/update"， 
method: "POST" 

}, 

"deleteById": { 
url: urlBase + "/CoffeeShops/:id", 
method: "DELETE" 

}, 

bh 滞 
url: urlBase + "/CoffeeShops/count"， 
method: "GET" 

Wn 

"prototype$updateAttributes": { 
url: urlBase + "/CoffeeShops/:id", 
method: "PUT" 

}, 
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} 
); 


RI["updateOrCreate"] = R["upsert"]; 
RI[I"update"] = R["updateAll"]; 

R["destroyById"] = R["deleteById"]; 
RI[I"removeById"] = RI["deleteById"]; 


R.modelName = "CoffeeShop"; 


return R; 
11); 

这 里 的 Resource 服务 是 一 个 围绕 $Sresource 服务 的 特定 于 LoopBack 的 封装 器 。 它 们 语 
法 是 一 致 的 。 现 在 我 们 已 经 运行 了 lb-ng 命令 ， 那 么 就 可 以 通过 该 service.js 文件 使 用 自 定 
义 的 RESTAPI。 

为 使 用 servicejs 文件 ， 需 要 复制 4 个 文件 到 loopback-coffee 应 用 中 。 首 先 ， 本 章 样 例 
代码 的 根 目录 中 包含 一 个 middlewarejson 文件 .从 loopback-coffee 目录 中 运行 下 面 的 命令 ， 
将 该 文件 复制 到 正确 的 位 置 : 


cp ../middleware.json server/middleware.json 


LoopBack 的 中 间 件 配置 是 一 个 复杂 的 主题 。 出 于 本 节 的 目的 ， 知 道 本 章 的 
middleware.json 文 件 将 配置 LoopBack 服 务 器 , 提供 client 目 录 中 的 静态 文件 即 可 。 换 句 话说 ， 
访问 http://localhost:3000/js/services.js 将 生成 client/js/services.js 文 件 的 内 容 ， 其 中 包含 了 
CoffeeShop 资 源 。 

复制 middleware.json 文件 后 , 我 们 还 需要 将 angular.js、angular-resource.js 和 loopback 
coffee.html 文件 复制 到 loopback-coffee 应 用 中 。angularjs 和 angular-resource.js 文件 分 别 包 
含 了 AngularJS 核心 和 ngResource 模块 。Loopback coffee html 文件 包含 了 页 面 的 真正 
HTML。 从 loopback-coffee 目录 中 运行 下 面 的 命令 ， 复 制 这 些 文件 : 


cp ../angular* client/js/ 

cp ../loopback coffee.html client/ 

现在 我 们 已 经 看 到 了 实际 的 CoffeeShop 资源 .运行 .node modules/strongloop/bin/slc run 
命令 启动 LoopBack 服务 器 ， 并 在 浏览 器 中 访问 http://localhost:3000/loopback_coffee.html。 
我 们 应 该 看 到 一 个 创建 新 咖啡 店 的 提示 ， 以 及 已 经 保存 的 所 有 咖啡 店 的 列表 。 
Loopback_ coffee html 文件 包含 一 个 控制 器 TestController， 它 将 使 用 CoffeeShop 资源 : 


angular.module ('myapp'， ['lbsServices']); 


function TestController($scope, CoffeeShop) { 
$scope.newShop = new CoffeeShop(); 
$scope.allSshops = CoffeeShop.find(); 
$scope.CoffeeShop = CoffeeShop; 
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$scope.reset = function() { 
$scope.newShop = new CoffeeShop(); 
, ; 

通过 使 用 由 TestController 公开 的 API， 可 以 创建 一 个 HTML 页 面 列 出 所 有 的 咖啡 店 ， 
并 让 用 户 保存 新 的 咖啡 店 。 下 面 是 loopback coffee html 文件 中 的 HTML 代码 : 


<div ng-controller="TestController"> 
<hl>Create New Shop</h1> 
<input type="text" ng-model="newShop.name" placeholder="name"> 
<br> 
<input type="text" 
ng-model="newShop.address" 
placeholder="address"> 
<br> 
<button ng-click="allShops .push (newShop) ; newShop. $create () ; reset() ;"> 
Save 
</button> 
<hr> 
<hl>Existing Shops</hl> 
<button ng-click="allShops = CoffeeShop.find()"> 
Reload 
</button> 
<ul> 
<1li ng-repeat="shop in allshops"> 
{{shop.name}} ({{shop.address}}) 
</1i> 
</ul> 
</div> 


之 前 的 样 例 使 用 了 CoffeeShop 资源 的 两 个 操作 。 第 一 , findO) 函 数 将 通过 发 送 一 个 GET 
请 求 到 /api/CoffeeShops 路 由 ,返回 一 个 所 有 咖啡 店 的 列表 。 下 面 是 servicesjjs 文件 中 find() 
操作 的 定义 : 
et 
isArray: true, 
url: urlBase + "/CoffeeShops", 


method: "GET" 
3 


第 二 个 操作 由 $create0 函 数 表示 。 该 函数 是 一 个 围绕 create 操作 的 实例 辅助 函数 。 操 人 
create 将 发 送 一 个 POST 请 求 到 /api/CoffeeShops， 创 建 出 一 个 新 的 CoffeeShop 实例 。 下 面 
是 services.js 文件 中 create 操作 的 定义 : 


T 


"create": { 
url: urlBase + "/CoffeeShops", 
method: "POST" 

和 
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通过 使 用 这 两 个 基本 操作 ， 我 们 已 经 创建 了 围绕 REST API 的 HTML 封装 器 。 多 亏 了 
StrongLoop 的 LoopBack， 为 了 创建 一 个 简单 的 RESTAPI 和 对 应 的 客户 端 代码 ， 只 需要 运 
行 一 些 命令 ， 并 生成 一 个 51 行 的 HTML 文件 即 可 。 

恭喜 ! 到 目前 为 止 ,你 已 经 学 习 了 如 何 使 用 $http 和 $resource 服务 ， 并 使 用 后 者 构建 了 
两 个 REST API 客户 端 。 但 我 们 只 使 用 了 HTTP 与 服务 器 进行 通信 。 尽 管 HTTP 目前 是 服 
务 器 通信 最 常见 的 机 制 ， 但 是 它 有 着 固有 的 限制 。HTTP 将 服务 器 限制 为 只 对 请 求 做 出 响 
应 : 它 未 被 设计 成 允许 服务 器 “推送 ”更 新 到 客户 端 。 这 就 是 为 什么 在 基于 浏览 器 进行 实 
时 聊天 这 样 的 应 用 中 ，Web 套 接 字 变 得 越 来 越 流行 。 下 一 节 将 介绍 Web 套 接 字 ， 并 展示 如 
何在 AngularJS 中 使 用 它们 。 


8.6 在 AngularJS 中 使 用 Web 套 接 字 


至 此 ， 我 们 已 经 熟悉 了 HITP。 不 过 ，HTTP 并 非 适 合 于 所 有 的 用 例 。 与 一 成 不 变 的 
请 求 /响应 HTTP 模型 相 比 ，WebSocket 标准 更 加 灵活 ， 它 允许 服务 器 发 送 更 新 到 客户 端 ， 
而 不 必 等 待 请 求 。 这 对 于 “实时 ”应 用 来 说 是 非常 有 用 的 。 术 语 “ 实 时 ”通常 是 不 明确 的 ， 
所 以 请 考虑 这 个 样 例 。 假 设 有 两 个 浏览 器 窗口 都 打开 了 之 前 小 节 “ 使 用 LoopBack 构建 简 
单 的 API” 中 构建 的 loopback-coffee 应 用 。 如 果 在 一 个 窗口 中 添加 了 一 个 咖啡 店 ， 它 不 会 
出 现在 第 二 个 窗口 中 ， 除 非 单 击 Reload 按钮 触发 男 一 个 HTTP 请 求 。 在 真正 的 实时 Web 
应 用 中 ， 服 务 将 推送 更 新 到 客户 端 ， 另 一 个 浏览 器 窗口 将 立即 被 更 新 。 


注意 : 

在 计算 机 科学 中 ， 网 络 套 接 字 是 两 个 程序 之 间 ( 可 能 是 运行 两 个 不 同 的 机 器 之 上 ) 通 信 
的 一 个 低级 别 抽象 。 套 接 字 是 一 个 复杂 的 话题 ， 但 是 在 本 章 ， 可 以 将 套 接 字 看 成 在 两 个 程 
序 之 间 提 供 连接 的 一 块 代码 ， 通 过 它 ， 程序 可 以 彼此 发 送 消息 。 每 个 程序 都 可 以 从 套 接 字 
读 取消 息 ， 并 向 套 接 字 写 入 消息 。 


目前 ， 在 JavaScript 中 使 用 Web 套 接 字 最 常见 的 库 是 SocketIO 。 它 实际 上 是 在 Web 套 接 
字 之 上 的 一 层 ， 通 过 它 可 以 使 用 Web 套 接 字 发 送 和 接收 事件 。SocketIO 使 用 的 是 许多 
JavaScript 项 目 都 在 使 用 的 事件 发 射 器 设计 模式 。 在 事件 发 射 器 设计 模式 中 ， 可 以 为 事件 注 
册 一 个 回调 ， 而 且 可 以 发 射 事件 。 假 设 我 们 发 射 了 一 个 名 为 connected 的 事件 。 然 后 事件 发 
射 器 将 调用 所 有 注册 监听 connected 事 件 的 回调 。 当 发 射 事件 时 , 还 可 以 在 事件 中 附加 数据 。 
事件 发 射 器 设计 模式 一 个 常见 的 应 用 是 错误 处 理 ， 如 下 面 的 伪 代 码 所 示 : 


Var emitter = new eventEmitter(); 


// 注册 一 个 回调 ， 来 监听 名 为 'error' 的 事件 
emitter.on('error', function(message) { 
console.10g (message); // 输出 'woops!' 

1D); 


// 发 射 名 为 'error' 的 错误 ， 其 中 的 数据 为 'woops!' 
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emitter.emit ('error', "woops!') 7 


事件 发 射 器 通常 只 在 程序 中 工作 。 不 过 ，SocketIO 提供 了 一 个 基于 Web 套 接 字 的 事件 
发 射 器 接口 ， 所 以 服务 器 也 可 以 发 射 (emit0) 事 件 到 浏览 器 。 


注意 : 

SocketIO 在 概念 上 类 似 于 Firebase( 另 一 个 实时 Web 开发 工具 ， 下 一 节 将 进行 讲解 )。 
它们 都 提供 了 基于 Web 套 接 字 的 事件 发 射 器 接口 ,通过 它们 可 以 实时 地 更 新 客户 端 。 主要 
的 区 别 在 于 : SocketIO 有 一 个 服务 器 端 API， 人 允许 我 们 编写 启用 了 SocketIO 的 服务 器 。 
Firebase 则 要 求 我 们 连接 到 Firebase 的 服务 器 ， 根 据 你 的 技能 组 合 这 可 能 是 个 优点 也 可 能 
是 个 缺点 。 在 本 章 ， 你 不 会 看 到 太 多 区 别 ， 因 为 本 章 的 样 例 代码 使 用 了 一 个 启用 SocketIO 
的 服务 器 。 


在 本 节 ， 我 们 将 使 用 AngularJS 和 SocketIO 构建 一 个 简单 的 实时 聊天 应 用 。 为 了 运行 
本 节 的 样 例 代码 ， 所 有 需要 使 用 的 就 是 serverjs 脚本 ， 这 是 本 章 到 目前 为 止 的 所 有 样 例 都 
会 使 用 的 脚本 。 在 运行 node serverjs 命令 时 ， 实 际 上 除了 在 端口 8080 上 启动 了 一 个 静态 
Web 服务 器 之 外 ， 还 在 端口 8081 上 启动 了 一 个 SocketIO 服务 器 。 在 本 章 ， 我 们 将 使 用 
SocketIO 版 本 1.3.3。 

除了 服务 器 组 件 , 还 需要 使 用 SocketIO 客户 端 JavaScript 文件 。 为 方便 起 见 ，SocketIO 
1.3.3 版 本 已 经 被 包含 到 了 本 章 样 例 代码 的 socket.io.js 文件 中 。 


注意 : 

Internet Explorer 9 及 较 早 的 版 本 不 支持 WebSocket。SocketIO 支持 Internet Explorer 9， 
但 使 用 的 是 一 个 权宜 的 后 备 选项 。 为 获得 最 佳 效 果 ， 请 使 用 最 新 版 本 的 Google Chrome( 版 
本 16 及 更 高 版 本 ) 或 者 Mozilla Firefox( 版 本 11 或 者 更 高 ) 


使 用 SocketIO 客户 端 在 句法 上 与 标准 的 事件 发 射 器 设计 模式 是 一 致 的 。SocketIO 客户 
端 将 附加 一 个 名 为 io0 的 函数 到 全 局 window 对 象 中 。 函 数 io0) 只 接受 一 个 参数 : 将 要 链接 
的 URL; 并 返回 一 个 事件 发 射 器 。 这 个 事件 发 射 器 有 几 个 内 置 的 事件 。 最 重要 的 内 置 事件 
是 connect 和 disconnect， 当 套 接 字 连接 和 断 开 时 将 分 别 发 射 这 两 个 事件 。 另 外 ， 客 户 端 可 
以 使 用 emit0 函 数 将 任意 事件 发 射 到 服务 器 。 

如 果 之 前 的 描述 不 够 清楚 ， 那 么 不 要 担心 ; 通过 样 例 学 习 SocketIO 是 非常 容易 的 。 下 
面 是 本 章 样 例 代码 中 socketio_chat html 文件 的 JavaScript 代码 。 这 就 是 使 用 SocketIO 创建 
一 个 实时 聊天 应 用 所 需 的 JavaScript 代码 : 


<script type="text/javascript" 
src="angular.js"> 

</script> 

<script type="text/javascript" 
src="socket.io.js"> 

</script> 

<script type="text/javascript"> 

angular.module('myApp', []); 
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function TestController($scope, S$window) { 


$scope.messages = []; 
$scope.name = 'TestConnection'; 
$scope.message = 'Test message'; 


Var socket = $window.io('http://localhost:8081'); 

$scope.connected = false; 

socket.on('connect', function() { 
$scope.connected = true; 
$scope.s$apply(); 

1); 

socket.on('disconnect', function() { 
$scope.connected = false; 
$scope.s$apply (); 

DD); 


socket.on('message', function(message) { 
$scope.messages.push (message); 
$scope. $apply (); 

1D; 


$scope.sendMessage = function() { 
socket.emit('message', { 
name: $scope.name, 
message: $scope.message 


DD); 


$scope.message = ''; 
bs 
} 
</script> 

之 前 代码 最 重要 的 部 分 就 是 on('message') 事 件 处 理 程序 和 sendMessage() 函 数 。 无 论 何 
时 ，SocketIO 客户 端 从 服务 器 接收 到 一 个 名 为 message 的 事件 ，on('message') 处 理 程序 都 将 
被 调用 。 该 处 理 程序 负责 聚合 所 有 从 服务 器 收 到 的 消息 。 因 为 SocketIO 事件 不 是 AngularJS 
的 一 部 分 ， 所 以 需要 调用 $scope.$apply()， 告 知 AngularJS: 作用 域 的 数据 已 经 改变 了 (关于 
为 什么 需要 这 么 做 的 原因 ， 请 参见 第 4 章 “ 数 据 绑 定 ”) 

之 前 样 例 中 另 一 个 重要 部 分 是 sendMessage() 函 数 。 该 函数 将 发 射 一 个 message 事件 到 
服务 器 。 本 章 的 SocketIO 服务 器 被 设置 为 重新 发 射 所 有 “message” 事 件 到 所 有 已 连接 的 
套 接 字 。 因 此 ， 当 调用 sendMessage() 函 数 时 ，SocketIO 将 推送 message 事件 到 所 有 已 连接 
的 客户 端 。 

为 了 看 到 实际 中 这 个 实时 聊天 样 例 是 如 何 运行 的 ,请 打开 浏览 器 并 访问 http://localhost: 
8080/socketio_chat html。 打 开 第 二 个 浏览 器 窗口 ， 并 访问 相同 的 地 址 。 你 将 注意 到 : 在 一 
个 浏览 器 窗口 中 单 击 Send Message 时 ， 另 一 个 浏览 器 窗口 将 自动 更 新 ! 

现在 我 们 已 经 看 到 了 实际 的 SocketIO 应 用 , 接 下 来 将 要 使 用 Firebase( 另 一 个 实时 Web 
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开发 工具 ) 创 建 一 个 类 似 的 聊天 应 用 。 与 SocketIO 相 比 ，Firebase 使 开发 实时 应 用 变 得 更 加 
简洁 。 


8.7 在 AngularJS 中 使 用 Firebase 


Firebase 是 开发 实时 Web 应 用 的 一 个 托管 解决 方案 。Firebase 将 使 用 AngularFire 连接 
器 与 AngularJS 进行 紧密 集成 。 由 于 这 些 功 能 ，Firebase 允许 我 们 耗费 最 小 的 精力 构建 
AngularJS 应 用 : 不 需要 设置 服务 器 、 不 需要 担心 $scope.$apply() 的 调用 。 所 有 需要 做 的 就 
是 注册 一 个 账户 ， 但 是 在 本 书 撰写 时 ，Firebase 提供 了 一 个 慷慨 的 免费 层 ， 它 应 该 能 够 满 
足 本 章 的 样 例 。 注 册 一 个 账户 ， 创 建 一 个 新 的 应 用 ， 然 后 记录 Firebase 数据 URL。 我 们 的 
Firebase 数据 URL 应 该 使 用 的 是 <name>.firebaseio.com 这 样 的 格式 。 

为 使 用 Firebase， 需 要 同时 使 用 Firebase 客户 端 和 AngularFire 连接 器 ， 它 们 提供 了 
AngularJS 到 Firebase 客户 端的 绑 定 。 为 方便 起 见 ， 本 章 样 例 代 码 中 已 经 包含 了 Firebase 客 
户 端 2.0.4(firebasejs 文件 ) 和 AngularFire 版 本 0.9.2(angularfire.js 文件 )。 如 你 将 要 看 到 的 ， 
一 旦 包含 了 这 些 文件 ， 持 久 化 数据 到 服务 器 将 变 得 非常 简单 。 

首先 ， 使 用 script 标记 包含 AngularJS 和 两 个 Firebase 文件 : 


<script type="text/javascript" 
src="angular.js"> 

</script> 

<script type="text/javascript" 
src="firebase.js"> 

</script> 

<script type="text/javascript" 
src="angularfire.js"> 

</script> 


接 下 来 创建 一 个 名 为 FirebaseController 的 控制 器 ， 它 将 提供 的 API 与 之 前 SocketIO 小 节 
控制 器 中 的 API 是 一 致 的 。 AngularFire 移 除了 监听 事件 的 需求 ,并 负责 调用 $scope.$apply()， 
甚至 还 可 以 持久 化 数据 到 服务 器 。 下 面 是 firebase_chathtml 文 件 中 的 JavaScript， 它 包含 了 
使 用 AngularFire 创 建 实时 聊天 应 用 必需 的 所 有 代码 : 


angular.module('myApp', ['firebase']); 


function FirebaseController($scope, S$window, $firebase) { 


$scope.messages = []; 
$scope.name = 'TestConnection'; 
$scope.message = 'Test message'; 


Var firebase = new S$window.Firebasel( 
'https:// <name>.firebaseio.com/'); // 这 里 是 Firebase 数据 的 URL 
Var sync = $firebase (firebase); 


$scope.messages = sync.$asArray(); 
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$scope.sendMessage = function() { 
$scope.messages.$add({ 
name: $scope.name, 
message: $scope.message 


]) 7 


$scope.message = "" 
] 7 
} 

这 个 样 例 出 奇 地 简洁 。 除 了 Firebase 数据 URL,， 没有 类 似 于 HTTP 调用 或 者 套 接 字 连 
接 这 样 的 代码 。 请 尝试 重复 之 前 小 节 “ 通 过 AngularJS 使 用 Web 套 接 字 ” 中 的 多 浏览 器 窗 
口 操作 。 分 别 在 两 个 浏览 器 窗口 中 打开 http://localhost:8080/firebase_chat.html， 并 开始 发 送 
消息 。 我 们 应 该 看 到 在 一 个 窗口 中 发 送 的 消息 也 会 出 现在 另 一 个 窗口 中 ， 反 之 亦 然 。 

使 之 前 样 例 中 这 个 实时 更 新 正常 工作 的 代码 被 封装 在 SasArray() 函 数 和 $add0 函 数 中 。 
$asArray() 函 数 将 返回 一 个 像 数 组 一 样 的 对 象 ， 它 拥有 特定 于 AngularFire 的 功能 。 在 调用 
$asArray0 函 数 时 ，Firebase 客 户 端 将 从 服务 器 加 载 所 有 的 消息 ， 并 维护 一 个 Web 套 接 字 ， 
用 于 接收 持续 更 新 。 在 Firebase 客 户 端 之 上 ，AngularFire 将 负责 运行 Sscope.$applyO0， 所 以 
我 们 不 必 担 心 AngularJS 的 digest 循 环 。 

$add0) 函 数 是 Firebase 中 对 JavaScript 数组 push() 函 数 的 蔡 代 。S$add() 函 数 将 负责 持久 
化 数据 到 Firebase。 注 意 ， 我 们 必须 使 用 $add0) 函 数 ， 如 果 只 是 使 用 了 push() 函 数 ， 那 么 数 
据 不 会 被 持久 化 到 Firebase 服务 器 中 。 

这 就 是 所 有 与 Firebase 相关 的 内 容 了 。 现 在 可 以 看 到 服务 器 通信 可 以 变 得 多 么 容易 。 
如 果 自己 维护 一 个 服务 器 ， 并 手动 使 用 $http 服务 创建 HTTP 请 求 真 的 太 麻烦 了 。Firebase 
是 一 个 完美 的 替代 选项 ， 它 允许 我 们 绕 过 所 有 这 些 工 作 ， 直 接 开始 构建 美观 的 UI。 现 在 你 
明白 为 什么 AngularFire 使 用 "三 向 数据 绑 定 "来 推销 自己 了 .AngularFire 以 几乎 与 AngularJS 
双向 绑 定 抽象 出 DOM 操作 的 相同 方式 ， 抽 象 出 了 服务 器 通信 。 使 用 双向 绑 定 时 ， 在 输入 
字段 中 输入 文本 将 自动 更 新 JavaScript 变量 的 状态 。 使 用 AngularFire 的 三 向 数据 绑 定时 ， 
在 输入 字段 中 输入 文本 时 将 更 新 JavaScript 变量 的 状态 ， 接 着 该 变量 立即 会 被 持久 化 到 服 
务 器 中 。 


8.8 小 结 


在 本 章 ， 我 们 学 习 了 AngularJS 社区 为 服务 器 通信 提供 的 各 种 工具 。 这 些 工具 从 相对 
低级 别 的 Shttp 服务 ( 它 提供 了 强大 的 功能 ,用 于 管理 每 个 HTTP 请求) 开始, 到 AngularFire( 它 
在 “三 向 数据 绑 定 ” 层 背后 抽象 出 了 服务 器 通信 )。 我 们 甚至 还 使 用 StrongLoop 的 LoopBack 
生成 了 自己 的 RESTAPI， 以 及 对 应 的 REST API 客户 端 。 
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我 们 还 学 习 了 HITP 和 Web 套 接 字 之 间 的 区 别 。 尽 管 HITP 仍然 是 浏览 器 JavaScript 
主要 的 服务 器 通信 协议 , 但 由 于 Web 套 接 字 拥有 推送 更 新 到 客户 端的 能 力 ， 它 变 得 越 来 越 
流行 。 尤 其 是 ， 可 以 通过 像 SocketIO 这 样 的 工具 ， 基 于 Web 套 接 字 构建 强大 的 实时 应 用 。 
Web 套 接 字 可 能 是 浏览 器 JavaScript 服务 器 通信 的 未 来 ， 但 是 HITP 在 很 长 时 间 内 仍然 是 
非常 重要 的 。 
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测试 和 调试 AngularJS 应 用 


本 章 内 容 : 

e 应 用 于 AngularJS 应 用 的 测试 金字 塔 

e 使 用 Mocha、Karma 和 NodeJS 执行 单元 测试 
e 使 用 Sauce 提供 云 浏览 器 

e@ 使 用 ng-scenario 和 protractor 执行 集成 测试 

e 高 效 地 使 用 调试 模式 

e_ Chrome 开发 者 控制 台 的 基础 知识 

本 章 的 样 例 代 码 下 载 : 


可 以 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文件 。 


9.1 AngularJS 测试 哲学 


关于 AngularJS 的 一 个 鲜 为 人 知 的 事实 是 : 原作 者 Misko Hevery 在 开始 编写 当时 的 


<angular/> 
师 如 何 使 月 


时 是 一 个 测试 工程 师 。 他 的 角色 是 测试 工程 师 ， 工 作 内 容 涉 及 教授 Google 工程 
上 依赖 注入 这 样 的 实践 编写 易于 测试 的 模块 代码 。 毫 不 奇怪 的 是 , AngularJS 从 第 


一 天 开始 就 被 设计 为 易于 编写 可 单元 测试 的 代码 。 这 就 是 为 什么 AngularJS 被 认为 是 一 个 
框架 , 而 不 是 简单 的 一 个 库 : 控制 器 、 服 务 和 指令 为 如 何 编写 代码 提供 了 一 个 固定 的 结构 。 


而 像 jQuery 这 样 


的 库 只 是 提供 了 在 代码 中 使 用 的 辅助 函数 。 


了 解 AngularJS 测试 哲学 的 第 一 步 就 是 了 解 什么 是 单元 测试 。 遗 憾 的 是 ,“ 单 元 测试 ” 


术语 经 常 被 软件 工程 师 误 上 


; 如 果 已 经 熟悉 了 另 一 种 定义 , 那么 请 记 住 该 术语 在 AngularJS 
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中 有 着 不 同 的 含义 。 单 元 测试 (一 块 代码 ) 可 以 独立 于 所 有 其 他 代码 块 正确 执行 。 尤 其 是 ， 
单元 测试 不 应 该 发 起 任何 网 络 请 求 或 者 读 取 任何 文件 (因为 输入 /输出 (WO) 是 非常 缓慢 的 ， 
而 且 会 增加 设置 开销 )， 并 假设 IO 总 是 成 功 的 。 尽 管 VO 不 可 能 失败 ， 但 是 与 内 存 操作 相 
比 ， 它 引起 测试 失败 的 可 能 性 要 高 几 个 数量 级 。 

一 个 理想 的 单元 测试 当 且 仅 当 模 块 在 测试 中 如 何 工作 的 假设 不 再 有 效 时 才 会 失败 。 因 
此 ， 大 量 单 元 测试 都 将 通过 易于 识别 何 时 改动 打破 了 向 后 兼容 性 ， 来 使 模块 测试 变 得 更 容 
易 。 另 外 ， 在 日 常 开发 实践 中 ， 专 注 于 单元 测试 将 鼓励 开发 出 健壮 的 模块 代码 ， 因 为 编写 
单元 测试 要 求 认真 思考 一 个 特定 模块 、 类 或 者 函数 所 固有 的 假设 。 如 Misko Hevery 经 常 说 的 ， 
如 果 代码 难以 测试 ， 那 么 它 也 就 没有 它 应 该 做 到 的 那么 好 。 最 后 ， 单 元 测试 不 应 该 要 求 网 络 
或 者 文件 JO， 所 以 它们 的 运行 速度 应 该 非常 快 一 -每 秒 运行 成 千 上 万 测试 的 级 别 一 一 并 提 
供 一 个 验证 基本 功能 的 快捷 方式 。 

下 面 是 难以 正确 进行 单元 测试 的 AngularJS 代码 的 一 个 样 例 : 


function MyController($scope) { 
Var xhr = new XMLHttpRequest (); 
xhr.open('GET', '/api/vl/me'); 
xhr.send(); 
xhr.onreadystatechange = function() { 
if (xhr.readyState === 4) { // 4 means response received 
$scope.data = xhr.responseText; 
} 
] 7 


$scope.computeResultsFromData = function() { 
// 这 里 是 $scope .data 的 一 些 操作 

] 7 

之 前 的 代码 非常 简单 ， 但 是 经 过 认真 检测 ， 发 现 它 携 带 大 量 的 假设 包 只 ， 这 将 使 它 难 
以 测试 。 注 意 : 如 果 要 测试 computeResultsFromData 函数 ， 我 们 首先 需要 执行 
XMLHttpRequest 代 码 ， 它 将 发 送 一 个 请 求 到 服务 器 。 换 句 话 说， 该 代码 要 求 使 用 一 个 含有 
/api/vl/me 路 由 的 服务 器 ， 这 可 能 是 非常 难以 设置 的 。 另 外 , 这 将 在 测试 中 引入 网 络 延迟 (和 
网 络 失败 的 风险 )， 会 使 测试 变 得 缓慢 而 且 不 可 靠 。 当 然 ， 之 前 的 代码 并 不 是 AngularJS 中 
如 何 使 用 HTTP 请 求 的 代表 。 它 在 AngularJS 经 常 使 用 的 实现 如 下 所 示 : 


function MyController($scope, S$http) { 
$http.get ('/api/vl/me') .success (function(data) { 
$scope.data = data; 
Ws 


$scope.computeResultsFromData = function() { 
// 这 里 是 $scope .data 的 一 些 操作 

1; 

} 
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除了 更 加 简洁 之 外 ,该 实现 有 一 个 关键 的 优点 : $http 作为 参数 被 传 入 到 了 MyController 
中 , 而 在 第 一 个 样 例 中 ,MyController 有 一 个 XMLHttpRequest 类 的 硬 编码 依赖 。 在 第 二 个 
实现 中 ，$http 可 以 轻松 地 被 模拟 出 来 一 一 也 就 是 说 ， 可 使 用 一 个 含有 相关 接口 的 合适 对 象 
蔡 换 它 ， 用 于 测试 目的 。 根 据 测试 需求 ， 可 以 轻松 地 使 用 一 个 返回 硬 编码 结果 的 函数 、 一 
个 断言 参数 正确 的 函数 或 者 甚至 是 一 个 发 送 跨 站 HTTP 请 求 到 暂 存 (staging) 服 务 器 的 函数 
蔡 换 $http.get0， 而 不 必修 改 代 码 。 在 单元 测试 的 上 下 文中 ，S$http.get(O) 函 数 应 该 被 一 些 轻 量 
级 并 且 运行 在 内 存 中 的 函数 所 替换 ， 所 以 我 们 的 测试 将 快速 执行 ， 并 且 没有 因为 网 络 IO 
问题 引起 失败 的 风险 。 


注意 : 

你 可 能 熟悉 “间谍 ”的 概念 。 为 高 效 地 使 用 非 模拟 函数 调用 执行 单元 测试 代码 ， 像 之 
前 的 XMLHttpRequest 样 例 ， 可 使 用 间谍 履 写 window.XMLHttpRequest 函数 。 有 几 个 模块 ， 
例如 SinonJS， 它 们 提供 了 复杂 的 间谍 功能 。 不 过 ， 这 种 方式 与 所 有 全 局 状态 有 着 相同 的 
问题 : 不 能 并 行使 用 全 局 间谍 运行 测试 ， 需 要 小 心地 清除 全 局 状态 ， 从 而 使 它们 不 会 污染 
后 续 的 测试 . AngularJS 的 代码 接口 将 使 它 易 于 编写 可 模拟 的 函数 调用 , 所 以 作为 经 验 准则 ， 
永远 不 应 该 在 全 局 变量 上 使 用 间谍 。 
测试 金字 塔 

尽管 单元 测试 是 保证 代码 质量 和 为 代码 正确 性 提供 快速 测试 的 不 可 缺少 的 工具 ， 但 是 
在 测试 时 它们 并 不 是 所 有 的 内 容 。 每 个 模块 可 能 能 够 按 预 期 运行 ， 但 是 模块 之 间 的 交互 仍 
然 可 能 是 不 正确 的 。 在 编写 高 单元 测试 覆盖 率 的 代码 中 ， 问 题 通常 会 出 现在 模块 之 间 的 交 
互 上 ， 而 不 是 模块 自身 。 测 试 金 字 塔 的 一 般 概 念 是 : 创建 一 系列 测试 ， 从 最 轻 量 级 和 简单 
的 单元 测试 开始 到 端 到 端 测试 ( 它 将 通过 终端 用 户 使 用 的 相同 代码 路 径 与 应 用 交互 )。 端 到 
端 测试 和 单元 测试 之 间 的 空白 部 分 被 称 为 集成 测试 。 参 见 图 9-1。 因 为 单元 测试 非常 快速 ， 
但 只 覆盖 到 了 少量 的 功能 ， 所 以 单元 测试 的 数量 要 比 端 到 端 测 试 多 得 多 ， 因 此 它 成 为 金字 
塔 的 基础 。 端 到 端 测试 通常 是 策 重 和 缓慢 的 ， 但 是 每 个 测试 都 将 覆盖 到 大 量 代 码 库 。 端 到 
端 测试 的 数量 应 该 比 单元 测试 少 得 多 。 所 以 端 到 端 测 试 组 成 了 金字 塔 的 顶部 。 如 果 将 测试 
金字 塔 比 作 USDA 食物 金字 塔 ， 那 么 单元 测试 就 是 花椰菜 : 你 可 能 不 喜欢 编写 它们 ， 但 是 
如 果 希 望 自己 的 代码 库 变 得 越 来 越 大 和 强壮 ， 那 么 无 论 如 何 也 不 应 该 缺少 它们 。 

通过 模拟 适当 的 模块 ， 可 以 按 需要 编写 更 高 级 或 者 更 低级 的 集成 测试 。 本 章 将 要 编写 
的 集成 测试 看 起 来 像 是 端 到 端 测试 ， 但 它 将 使 用 模拟 的 HTTP 后 端 蔡 代 $http 服务 。 也 就 是 
说 ， 这 些 集成 测试 将 通过 与 HIML 元 素 交 互 的 方式 与 AngularJS 代码 进行 交互 ， 但 是 服务 
器 端 代码 是 通过 一 个 内 存 存根 (stub) 来 模拟 的 。 这 将 使 你 可 以 专注 于 测试 AngularJS 应 用 ， 
而 不 必 担心 是 否 需要 测试 服务 器 。 正 确 的 端 到 端 测试 看 起 来 应 该 类 似 于 这 些 集成 测试 ， 但 
使 用 的 是 真正 的 服务 器 。 
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测试 模块 交互 (包括 DOM) 


单元 测试 
众多 、 快 速 、 测 试 每 个 模块 


图 9-1 
图 9-2 展示 了 单元 测试 、DOM( 文 档 对 象 模型 ) 集 成 测试 和 端 到 端 测试 与 AngularJS 应 


用 架构 的 关系 。 


单元 测试 
控制 器 + 服务 
D> 
指令 +DOM 服务 器 
DOM 集成 
E2E 测试 
图 9-2 
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9.2 AngualrJS 中 的 单元 测试 


直到 最 近 , 对 JavaScript 进行 单元 测试 仍然 是 非常 困难 的 。 不 过 , 随 着 NodeJS 的 发 展 ， 
JavaScript 测试 工具 得 到 爆炸 性 发 展 。 另外 , 作为 一 个 可 从 命令 行使 用 的 JavaScript 解释 器 ， 
NodeJS 自身 是 用 于 JavaScript 单元 测试 的 一 个 宝贵 工具 。NodeJS 依赖 于 V8 JavaScript 引 
擎 ， 所 以 可 以 合理 地 推测 出 JavaScript 将 如 何在 Google Chrome 浏览 器 中 运行 。 对 于 本 节 
的 第 一 部 分 ， 在 学 习 如 何在 真正 的 浏览 器 中 运行 测试 之 前 ， 将 只 在 NodeJS 中 编写 测试 。 
如 果 尚 未 安装 NodeJS， 请 访问 http://www.nodejs.org， 并 按照 所 选择 平台 (OSX、Windows 
或 者 Linux) 对 应 的 指令 安装 它 。 在 本 节 ， 我 们 还 将 学 习 如 何 使 用 工具 (通过 Node 包 管 理 器 
npm 可 以 获得 ) 轻 松 织 入 在 线 浏览 器 ， 用 于 测试 。 


9.2.1 ”Mocha 测试 框架 


Mocha 在 NodeJS 和 AngularJS 社区 中 都 是 一 个 流行 的 测试 框架 , 它 是 由 多 产 的 NodeJS 
社区 贡献 者 T Holowaychuk( 他 还 编写 了 本 节 将 使 用 的 测试 模块 ) 编 写 的 。 Mocha 非常 灵活 ， 
它 得 到 了 大 量 测试 工具 的 支持 。Jasmine 是 另 一 个 测试 框架 ， 它 在 AngularJS 社区 中 非常 流 
行 ， 但 是 Mocha 除了 在 AngularJS 社区 中 流行 外 ， 还 已 成 为 NodeJS 社区 中 的 标准 。 而 且 ， 
Mocha 和 Jasmine 的 语法 几乎 是 一 致 的 ;两 者 之 间 的 区 别 是 最 迁 腐 的 。 最 大 的 区 别 就 是 
Jasmine 提供 了 自己 的 内 置 断言 框架 ， 而 Mocha 没有 。 

为 了 开始 使 用 Mocha， 请 使 用 npm 安装 它 : 


npm install mocha -g 


注意 : 

命令 中 指定 的 -g 标志 将 告诉 npm 把 Mocha 安装 在 全 局 的 位 置 ， 所 以 可 从 命令 行 访问 
mocha 命令 。 全 局 安装 对 于 教学 来 说 是 非常 有 用 的 ， 但 是 在 实际 的 项 目 中 不 推荐 使 用 。 推 
荐 使 用 的 方法 是 : 在 package.json 文件 中 将 Mocha 添加 为 依赖 ，npm install 将 使 用 该 文件 
决定 是 否 需要 安装 它 。 还 可 以 使 用 Grunt、Gulp 或 者 Makefile 这 样 的 工具 (参见 第 2 章 “ 智 
能 工作 流 和 构建 系统 ”) 运 行 测试 。 这 将 保证 可 以 使 用 单个 npm install 命令 安装 正确 版 本 的 
Mocha。 而 且 ， 将 Mocha 安装 在 局 部 将 防止 不 同 项 目 之 间 的 版 本 冲突 。 本 节 稍 后 将 使 用 这 

Mocha 主要 受 行为 驱动 开发 (BDD) 实 践 所 激励 ， 所 以 与 熟悉 的 JUnit、PyUnit 或 者 类 似 
的 框架 中 使 用 的 、 含 有 setUp0 和 tearDown0 函 数 的 常见 测试 用 例 相 比 ，Mocha 的 测试 结构 
稍 有 不 同 。Mocha 的 测试 结构 天 生 更 加 强大 ， 测 试 将 使 用 describe0 和 it() 函 数 进行 构造 。 
函数 it0 将 高 效 地 描述 单个 测试 用 例 。 而 describe0 函 数 则 封装 了 一 个 测试 套件 ,在 describe() 
函数 中 ， 可 以 定义 beforeEach() 和 afterEach0 函 数 ， 它 们 将 分 别 在 套件 的 每 个 测试 之 前 和 之 
后 执行 。 

如 果 这 不 够 清晰 ， 请 不 要 担心 。 一 旦 你 看 到 下 面 的 样 例 之 后 ，Mocha 的 测试 结构 就 变 
得 易于 理解 了 。 假 设 现 在 有 一 个 简单 的 控制 器 ， 它 有 验证 和 保存 表单 的 函数 ， 该 表单 将 要 
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求 用 户 输入 用 户 名 和 电子 地 址 : 


function MyFormController($scope, $http) { 
$scope.userData = {}; 
$scope.errorMessages = []; 


$scope.saveForm = function() { 
$scope.saving = true; 
$http. 
put('/api/submit', $scope.userData). 
success (function(data) { 
$scope.saving = false; 
$scope.success = true; 
}). 
error (function (err) { 
$scope.saving = false; 
$scope.error = err; 


] 7 


$scope.validateForm = function() { 
var validationFunctions = [ 
{ 
fn: function() { 
return !!$scope.userData.name 
}, 
message: 'Name required' 


fn: function() { 
return !!$scope.userData.email 


}, 
message: 'Email required' 


$scope.errorMessages = []; 
for (var i = 0; i < validationFunctions.length; ++i) 
if (!validationFunctions[i].fn()) { 


$scope.errorMessages.push (validationFunctions[i] .message); 


} 
return $scope.errorMessages; 


if (typeof module !== 'undefined') { 
module .exports = MyFormController; 


第 9 章 测试 和 调试 AngularJS 应 用 


在 MyFormController 中 的 typeof module 检测 是 为 了 使 MyFormController 在 NodeJS 的 
my_form controllerjs 文 件 之 外 可 见 .NodeJS 的 JavaScript 运 行 时 使 用 了 文件 级 别 的 作用 域 ， 
并 要 求 变 量 被 附加 到 文件 的 module 对 象 中 , 从 而 使 变量 在 文件 外 可 见 。 如 果 选 择 在 NodeJS 
测试 AngularJS 控制 器 ， 那 么 可 以 使 用 Browserify 这 样 的 模块 构建 代码 ， 或 者 使 用 之 前 
所 示 的 typeofmodule 检查 。 

接 下 来 的 样 例 将 演示 validateForm() 函 数 的 两 个 对 应 的 单元 测试 : 


bl 


Var MyFormController = require('./my form controller.js'); 
Var assert = require('assert'); 


describe('MyFormController', function() { 
describe('validateForm', function() { 
var $scope; 
beforeEach (function() { 
$scope = {}; 
MyFormController ($scope, null); 
}); 


it('should succeed if user entered name and email', function() { 
$scope.userData.name = 'Victor Hugo'; 
$scope.userData.email = 'les@miserabl.es'; 


$scope.validateForm(); 
assert.equal (0, $scope.errorMessages.1length); 
1); 


it('should fail with no email', function() { 
$scope.userData.name = 'Victor Hugo'7 
$scope.userData.email = "''; 


$scope.validateForm(); 
assert.equal (1l, $scope.errorMessages.length); 
assert.equal('Email required', $scope.errorMessages[0]); 
]) 
DD); 
1D); 


当 从 命令 行使 用 mocha my form controllertestjs 命令 运行 上 面 的 测试 时 ， 应 该 得 到 
Mocha 默认 报告 格式 的 结果 : 


2 passing (4ms) 


注意 , MyFormController 代码 从 技术 角度 讲 完全 不 依赖 于 AngularJS。 这些 是 严格 的 单 
元 测试 ，my_form_controllertestjs 文件 中 的 代码 不 含 非 模拟 依赖 ， 也 不 要 求 访问 DOM。 
Imy_form_controllertestjs 文件 演示 了 describe/it 语法 的 灵活 性 。 可 以 符 套 describe() 的 
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调用 ， 在 测试 套件 之 间 提 供 细 粒 度 的 分 离 ， 而 且 可 以 重用 高 级 别 describe0 调 用 中 的 变量 。 
即使 describeO 调 用 中 只 有 一 个 describe() 调 用 ， 我 们 仍 可 以 用 beforeEach0) 来 运行 每 个 嵌 套 
测试 套件 中 的 公共 设置 。 还 可 以 在 相同 的 级 别 混合 describe0 和 it() 的 调用 。describeO 和 it0 
调用 将 按 顺 序 执行 ， 但 是 所 有 itO 调 用 都 将 在 同 级 别 的 describeO) 调 用 之 前 执行 。 

为 测试 Mocha 的 执行 顺序 ， 请 分 析 下 面 的 代码 在 Mocha 中 运行 时 生成 的 输出 : 


describe('', function() { 
console.1og('Top level describe'); 


beforeEach (function() { 
console.1og('Top level beforeEach'); 


17); 


afterEach (function() { 
console.1og('Top level afterEach'); 


]) 


describe('', function() { 
// 第 一 个 describe 拥有 两 个 it () 调用 
beforeEach (function() { 
console.1og('2nd level beforeEach from first describe'); 


); 


afterEach (function() { 
console.1og('2nd level afterEach from first describe'); 


); 


tA Fonctionty 二 
console.log('test1'); 
); 


it function() { 
console.log('test2°'); 
); 


DD); 


describe('', function() { 
// 第 二 个 describe 拥有 一 个 让 () 调用 
beforeEach (function() { 
console.1og('2nd level beforeEach from second describe'); 


1); 


afterEach (function() { 
console.1og('2nd level afterEach from second describe'); 


1); 


ctiom(ty 汪 
console.log('test3°'); 
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it('' 


, function() { 


console.log('test4'); 


1D); 


Top level 
Test4 

Top level 
Top level 
2nd level 
test1 

2nd level 
Top level 
Top level 
2nd level 
test2 

2nd level 
Top level 
Top level 
2nd level 
test3 

2nd level 
Top level 


因为 itO 调 用 将 在 相同 级 别 的 describeO 调 用 之 前 执行 ， 所 以 之 前 代码 的 输出 将 如 下 


beforeEach 


afterEach 
beforeEach 
beforeEach from first describe 


afterEach from first describe 
afterEach 
beforeEach 
beforeEach from first describe 


afterEach from first describe 
afterEach 

beforeEach 

beforeEach from second describe 


afterEach from second describe 
afterEach 


至 此 ， 你 已 经 深入 了 解 了 Mocha 测试 框架 的 基础 知识 。 在 NodeJS 中 执行 测试 是 从 命 
令 行 快速 验证 每 个 模块 正确 性 的 方式 。 下 一 步 将 针对 真正 的 浏览 器 执行 单元 测试 。 


9.2.2 ”使 用 Karma 在 浏览 器 中 执行 单元 测试 


在 命令 行 中 
制 。 如 果 目 标 用 


是 足够 的 。 不 过 ， 不 同 浏览 器 如 何 执行 JavaScript 之 间 有 着 许多 微妙 的 区 别 ， 所 以 在 真正 


使 用 NodeJS 执行 Mocha 单元 测试 是 非常 简单 的 ， 但 是 这 有 一 些 重要 的 限 
户 只 使 用 Google Chrome 进行 浏览 的 话 ， 那 么 在 NodeJS 中 运行 测试 可 能 


T 


的 浏览 器 中 执行 单元 测试 有 着 明显 的 优点 。 幸 运 的 是 ， 有 一 个 称 为 Karma 的 工具 ， 通 过 它 
可 以 启动 浏览 器 、 使 用 浏览 器 进行 测试 并 在 命令 行 中 查看 结果 。 在 本 节 ， 将 使 用 Karma 从 
命令 行 中 直接 在 Google Chrome 中 运行 测试 。 

使 用 npm 安装 和 配置 Karma 是 最 容易 的 .Karma 被 组 织 为 一 个 拥有 大 量 插件 的 轻 量 级 
核心 ， 所 以 如 果 看 到 packagejjson 中 含有 大 量 以 karma- 为 开头 的 依赖 时 请 不 要 吃惊 。 可 以 


与 往常 一 样 使 用 


npm install karma -g 将 Karma 安装 到 全 局 。 不 过 ， 这 在 实际 项 目 中 是 非常 
为 这 无 法 利用 运行 npm install 安装 所 有 项 目 依赖 的 能 力 。 再 次 ， 理 想 的 


JavaScript 项 目 只 要 求 使 用 一 个 命令 安装 所 有 的 依赖 。 为 真正 运行 这 个 简单 的 Karma 测试 ， 
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将 Karma 依赖 都 添加 到 package.json 文件 中 : 


{ 
"name": "chapter-9", 
myersion"s O00 
"description"™: "mv 
"main": "index.js", 
wcripte"s 汪 
"test": "make test" 
}, 
"dependencies": { 


moGha se “E20 
war 本 人 于 和 证， 
"karma-chai": "0.1.0", 
"karma-mocha": "0.1.4", 
"karma-chrome-launcher": "0.1.4" 
}, 
"author": "Valeri Karpov", 
"iceonse"s ”SC 


} 


注意 , 即使 是 在 简单 的 测试 文件 和 浏览 器 的 简单 用 例 中 , 也 需要 安装 3 个 Karma 插件 。 
karma 包 代表 了 Karma 的 轻 量 级 核心 。 通过 karma-mocha 包 , 可 将 Karma 和 Mocha 集成 在 
一 起 ，karma-chai 包 为 Mocha 测试 提供 了 一 个 断言 框架 。 最 后 , 通过 karma-chrome-launcher 
包 ，Karma 可 以 启动 和 织 入 一 个 在 线 Google Chrome 浏览 器 。 运 行 npm install 后 ， 再 运 
行 .node_modules/Karma/bin/Karma --version， 来 验证 是 否 安装 了 正确 的 Karma 版 本 。 


注意 : 

NodeJS 包 管 理 器 npm 有 点 不 同 寻常 。 除 非 使 用 了 -g 标志 ， 否 则 npm 将 把 依赖 安装 到 
当前 目录 的 node _modules 目录 中 。 而 且 , node modules 目录 中 的 每 个 依赖 都 是 一 个 包含 
了 自己 node _modules 目录 的 目录 .将 NodeJS 中 依赖 展示 为 树 的 这 个 决定 经 常 因为 浪费 空 


其 次 ， 因 为 每 个 模块 都 有 自己 依赖 的 副本 ， 所 以 永远 也 不 会 在 两 个 模块 之 间 因 为 依赖 于 相 
同 模块 的 两 个 不 兼容 版 本 而 引起 冲突 。 由 于 第 二 个 事实 ， 不 指定 依赖 的 精确 版 本 号 并 没有 
什么 好 处 一 一 也 就 是 说 应 该 使 用 0.1.4， 而 不 是 ~0.1。 


告诉 Karma 如 何 运行 测试 的 方式 是 使 用 配置 文件 。Karma 默认 将 在 当前 目录 中 寻找 一 


个 karma.confjs 文件 。 尽管 可 以 手动 创建 Karma 配置 文件 , 但 是 通常 将 使 用 Karma 方便 的 
init 辅助 函数 创建 配置 文件 的 基本 内 容 。 在 shell 中 运行 下 面 的 命令 , 初始 化 一 个 配置 文件 : 


./node modules/karma/bin/karma init 


然后 Karma 将 咨询 几 个 问题 ,在 我 们 的 用 例 中 ,选择 Mocha 作为 测试 框架 ,选择 Chrome 
作为 希望 启动 的 唯一 浏览 器 。 完 成 后 ， 当 前 目录 中 应 该 包含 了 一 个 karma.confjs 文件 ， 它 
的 内 容 将 如 下 所 示 : 
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module.exports = function(config) { 
config.set({ 


// 用 于 解析 所 有 模式 (例如 文件 、 排 除 ) 的 基础 路 径 


basePath: "'', 

// 将 要 使 用 的 框架 

// 可 用 的 框架 : https:// npmjs.org/browse/keyword/karma-adapter 
frameworks: ['mocha', 'chai'], 


// 在 浏览 器 中 加 载 的 文件 /模式 列表 
files: [ 
'./my_form controller.js', 
'./my_form controller.test.js' 
]， 


// 排除 的 文件 列表 


exclude: [ 

]， 

preprocessors: {}, 
reporters: ['progress'], 


// Web 服务 器 端口 
port: 9876, 


// 启用 /禁用 输出 (报告 和 日 志 ) 中 的 颜色 


colors: true, 


logLevel: config.LOG INFO, 


// 是 否 监视 文件 并 在 文件 改变 时 执行 测试 


autowatch: true, 


// 启动 这 些 浏 览 器 
// 可 用 的 浏览 器 启动 器 : https:// npmjs.org/browse/keyword/karma-launcher 
browsers: ['Chrome'], 


// 持续 集成 模式 
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// 如 果 为 真 ，Karma 将 捕获 浏览 器 、 运 行 测试 并 退出 
singleRun: false 
1D); 
7 
该 配置 几乎 足以 正确 地 在 Chrome 中 运行 my_form controllertestjs 测试 。 但 我 们 还 需 
要 对 my _form controllertestjs 文件 本 身 做 一 个 进一步 的 改动 。Karma 将 在 浏览 器 中 加 载 指 
定 的 文件 ， 所 以 my_form_ controllertestjs 文件 需要 保证 它 在 浏览 器 中 运行 时 不 会 调 上 
require() 函 数 。 因 为 函数 require0 是 特定 于 NodeJS 的 ， 所 以 当 Karma 尝试 在 Chrome 中 运 
行 测试 时 ， 该 函数 并 不 存在 。 


注意 : 

通过 像 Browserify 这 样 的 工具 (参见 第 3 章 )， 可 以 把 NodeJS 样式 的 JavaScript 编译 成 
浏览 器 友好 的 JavaScript， 但 是 这 些 工具 的 特点 与 测试 AngularJS 应 用 的 主题 关系 不 大 。 出 
于 尽量 减 小 复杂 性 的 目的 ， 本 章 不 会 使 用 Browserify。 


下 面 是 my_form controllertestjs 文件 修改 之 后 的 头 部 代码 : 


if (typeof require !== "undefined') { 
MyFormController = require('./my_ form controller.js'); 
assert = require('assert'); 
} 
现在 应 该 能 够 通过 运行 ./node modules/karma/bin/karma start 启动 Karma 了 。Karma 将 
启动 Google Chrome 的 本 地 版 本 ， 执 行 测试 ， 并 在 命令 行 中 提供 结果 。 
如 果 倾 向 于 在 项 目 中 使 用 Karma， 那 么 应 该 使 用 类 似 于 Grunt、Gulp 或 者 Make 这 样 
的 自动 化 工具 简化 测试 工作 流 ， 另 外 不 必 再 每 次 输入 .node modules/karma/bin/karma 命令 。 
例如 ， 下 面 是 一 个 简单 的 规则 ， 可 以 将 它 添加 到 Makefile 中 ， 这 样 我 们 就 可 以 使 用 更 简洁 
的 make karma 命令 启动 Karma: 


karma: 
./node modules/karma/bin/karma start 


9.2.3 ”使 用 Sauce 在 云 中 执行 浏览 器 测试 


上 一 节 中 描述 的 Karma 测试 设置 在 实际 中 很 少 使 用 。 尽 管 它 似 乎 非常 简单 ,但 是 目前 
的 Karma 设置 是 非常 有 限 的 ， 因 为 需要 在 每 个 开发 机 器 中 安装 所 有 需要 测试 的 浏览 器 。 我 
们 会 希望 在 Microsoft Internet Explorer 的 多 个 版 本 和 无 数 移动 浏览 器 中 测试 目标 应 用 ， 这 
个 可 能 性 是 很 大 的 。 而 在 开发 机 器 中 创建 含有 这 些 浏览 器 的 环境 是 非常 麻烦 的 。 幸 亏 ， 这 
个 问题 有 一 个 云 解决 方案 : Sauce(https://saucelabs.com)， 它 拥有 提供 在 线 浏 览 器 用 于 执行 
测试 的 能 力 。 另 外 ，Sauce 对 Karma 提供 了 良好 的 支持 。 不 需要 为 Sauce 使 用 Karma， 但 
是 出 于 本 节 的 目的 ， 将 在 Sauce 提供 的 浏览 器 中 定义 一 个 新 的 Karma 配置 。 

首先 ， 访 问 https:// saucelabs.com 并 注册 一 个 账户 。Sauce 提供 了 一 个 付费 服务 ， 但 是 
也 有 免费 的 选项 : 提供 数量 有 限 的 测试 时 间 。 这 种 免费 的 方式 对 于 本 章 的 目的 来 说 应 该 是 
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足够 的 。 一 旦 注册 成 功 ， 记 住 你 的 用 户 名 并 找到 Sauce 应 用 编程 接口 (APD 键 。 需 要 同时 使 
用 这 两 者 。 首 先是 karma-sauce.confjs 文件 的 内 容 ，Karma 和 Sauce 的 配置 文件 如 下 所 示 : 


module .exports = function(config) { 
Var customLaunchers = { 

sl firefox: { 
base: 'SauceLabs', 
browserName: 'firefox', 
Version: '27' 

}, 

sl safari: { 
base: 'SauceLabs', 
browserName: 'safari', 
platform: 'OS X 10.6', 
Version: '5' 

}, 

sl ie 9: { 
base: 'SauceLabs', 
browserName: 'internet explorer', 
platform: 'Windows 7'， 
version: '9' 

} 

}; 


config.set({ 
// 用 于 解析 所 有 模式 (例如 文件 、 排 除 ) 的 基础 路 径 


basePath: '', 


// 将 要 使 用 的 框架 
// 可 用 的 框架 : https:// npmjs.org/browse/keyword/karma-adapter 
frameworks: ['mocha', 'chai'], 


// 在 浏览 器 中 加 载 的 文件 /模式 列表 
files: [ 
'./my_form controller.js', 
'./my_form controller.test.js' 
]， 


exclude: [], 
preprocessors: {}, 


reporters: ['dots', 'saucelabs'], 


// Web 服务 器 端口 
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port: 9876, 


// 启用 /禁用 输出 (报告 和 日 志 ) 中 的 颜色 


colors: true, 


logLevel: config.LOG INFO, 


// 是 否 监视 文件 并 在 文件 改变 时 执行 测试 


autoWatch: true, 


// 使 用 这 些 自 定义 启动 器 在 Sauce 中 启动 浏览 器 


customLaunchers: customLaunchers, 


// 启动 这 些 浏 览 器 
// 可 用 的 浏览 器 启动 器 : https:// npmjs.org/browse/keyword/karma-launcher 
browsers: Object.keys (customLaunchers), 


// 持续 集成 模式 
// 如 果 为 真 ，Karma 将 捕获 浏览 器 、 运 行 测试 并 退出 


singleRun: true, 


sauceLabs: { 
testName: 'Web App Unit Tests' 
}, 
DD); 

}; 

之 前 代码 中 高 亮 显示 的 更 改 部 分 允许 Karma 连接 到 Sauce 和 它 所 提供 的 目标 浏览 器 。 

customLaunchers 对 象 定 义 了 操作 系统 (OS) 以 及 希望 Sauce 提供 的 浏览 器 配置 的 列表 。 在 本 
例 中 ， 将 在 Linux 上 启动 Firefox 27， 在 Mac OSX 10.6 Snow Leopard 上 启动 Safari 6， 在 
Microsoft Windows 7 上 启动 Internet Explorer 9。 因 为 Karma 默认 会 一 直 监 视 文件 的 改动 ， 
所 以 为 了 使 测试 正确 地 结束 ， 需 要 使 用 singleRun 选项 。 最 后 ，sauceLabs.testName 字段 允 
许 我 们 为 测试 指定 人 们 可 读 的 标识 符 ， 从 而 允许 我 们 在 Sauce 资源 仪表 盘 的 测试 运行 中 查 
找 日 志 。 
要 使 用 Sauce 配置 运行 Karma， 还 需要 做 出 另外 两 个 较 小 的 改动 。 首 先 ， 需 要 修改 
Makefile 来 运行 这 个 新 的 Karma 配置 。Karma 可 执行 文件 将 把 第 二 个 命令 行 参数 用 作 应 该 
使 用 的 配置 文件 , 所 以 运行 karma start karma-sauce.conf js 命令 将 告诉 Karma 使 用 这 个 新 的 
配置 文件 。 为 了 使 用 新 的 配置 运行 Karma， 应 该 在 Makefile 中 创建 一 个 新 的 规则 : 


karma-sauce: 
./node modules/karma/bin/karma start karma-sauce.conf.js 


除了 新 增加 的 karma-sauce 规则 ， 需 要 为 Sauce 提供 用 户 名 和 API 密 钥 。 默 认 情 况 下 ， 
karma-sauce 将 寻找 名 为 SAUCE_USERNAME 和 SAUCE_ACCESS_KEY 的 环境 变量 ， 从 
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而 知道 它 应 该 使 用 哪些 凭据 。 如 果 没 有 使 用 环境 变量 的 经 验 ， 也 不 要 担心 ， 有 两 种 方式 可 
以 设置 这 些 变 量 。 


注意 : 

环境 变量 是 一 个 命令 行 会 话 中 的 全 局 命名 变量 。 环 境 变量 最 知名 的 样 例 就 是 PATH,， 
该 变量 将 告诉 shell 应 该 在 哪个 目录 中 寻找 可 执行 文件 。 一 些 Web 开发 者 将 使 用 环境 变量 
配置 服务 器 和 命令 行 工具 。Web 开发 者 之 间 经 常 争论 配置 文件 还 是 环境 变量 是 处 理 服务 器 
配置 的 正确 方式 。 


设置 环境 变量 的 第 一 种 方式 是 使 用 env 命令 。 命 令 env 将 创建 一 个 临时 的 环境 变量 ， 
它 只 存在 于 当前 shell 命令 的 生命 周期 中 。 例 如 ， 正 确 地 运行 env SAUCE_ USERNAME= 
vkarpov15 make karma-sauce 命令 ,将 把 SAUCE_ USERNAME 变量 公开 给 make karma-sauce 
命令 。 不 过 ， 如 果 再 次 运行 make karma-sauce， 不 会 再 设置 SAUCE_USERNAME 变量 ， 
除非 再 次 使 用 env SAUCE USERNAME=vkarpov15 作为 命令 的 开头 。 

每 次 都 使 用 env 命令 将 产生 过 多 的 重复 ， 所 以 可 以 选择 使 用 export 命令 。 运 行 export 
SAUCE USERNAME=vkarpov15 将 设置 SAUCE_USERNAME 环境 变量 ， 直 到 关闭 终端 窗 
口 。 然 后 我 们 就 可 以 运行 make karma-sauce， 而 不 需要 额外 进行 配置 。 

为 了 强调 Sauce 的 高 效 ， 将 要 运行 的 测试 被 设计 为 在 Safari 5 和 Interet Explorer 9 中 
以 不 同 的 方式 失败 : 


descripbe('Tests that fail on different browsers', function() { 
describe('Safari 5 disallows non-UTC designators for ISO dates', 
function() { 
assert.ok(new Date('2007-04-05T14:30:00') .tostring() != 'Invalid 
Date'); 
]) 7 


describe('IE9 outputs weird date string format', function() { 
// IE9 将 输出 类 似 于 'Thu Apr 5 14:30:00 UTC 2007' 的 日 期 
var d = new Date('2007-04-05T14:30:00') .tostring(); 
assert.ok(d.indexof ('Thu Apr 05 2007') != -1); 
ys 
Wn 


现在 运行 make karma-sauce 命令 时 ， 应 该 看 到 一 些 类 似 于 下 面 内 容 的 输出 。 该 测试 应 
该 在 Firefox 27 中 成 功 ， 但 是 在 Safari 5 和 Internet Explorer 9 中 失败 : 


INFO [launcher.sauce]: firefox 27 session at https:// 
saucelabs.com/tests/... 
INFO [Firefox 27.0.0 (Linux)]: Connected on socket iDn0 bzZOO0KuYNovd-DoC... 


Firefox 27.0.0 (Linux): Executed 2 of 2 SUCCESS (0.251 secs / 0.001 secs) 
INFO [launcher.sauce]: safari 5 (0S X 10.6) session at ... 
INFO [launcher.sauce]: internet explorer 9 (Windows 7) session at ... 
INFO [Safari 5.1.9 (Mac OS X 10.6.8)]: Connected on socket 
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UfEfV52J0O1UhK38mA1-DoD..- 
Safari 5.1.9 (Mac OS X 10.6.8) ERROR 
AssertionError: expected false to be truthy 
at /Users/vkarpov/Desktop/Wiley/Sample/Chapter 9/ 
node modules/chai/chai.js:925 
Safari 5.1.9 (Mac OS X 10.6.8) ERROR 
AssertionError: expected false to be truthy 
at /Users/vkarpov/Desktop/Wiley/Sample/Chapter 9/ 
node _ modules/chai/chai.js:925 
Safari 5.1.9 (Mac OS X 10.6.8) : Executed 0 of 0 ERROR (0.686 secs / 0 secs) 
INFO [IE 9.0.0 (Windows 7) ] : Connected on socket dxAxFkKCbwzDSkIjx-DoE ... 
IE 9.0.0 (Windows 7) ERROR 
AssertionError: expected false to be truthy 
at /Users/vkarpov/Desktop/Wiley/Sample/Chapter 9/ 
node modules/chai/chai.js:921 
IE 9.0.0 (Windows 7) ERROR 
AssertionError: expected false to be truthy 
at /Users/vkarpov/Desktop/Wiley/Sample/Chapter 9/ 
node modules/chai/chai.js:921 
IE 9.0.0 (Windows 7): Executed 0 of 0 ERROR (1.678 secs / 0 secs) 
INFO [launcher.sauce]: Shutting down Sauce Connect 
make: *** [karma-sauce] Error 1 


从 高 级 别 上 看 , Karma 在 Sauce 中 提供 了 目标 浏览 器 , 并 指导 Sauce 将 它们 指向 Karma 
在 本 地 机 器 中 启动 的 轻 量 级 Web 服务 器 。 当 Sauce 加 载 页 面 时 ，Karma 将 捕获 浏览 器 ， 从 
而 在 该 浏览 器 中 运行 测试 。 一 个 遗憾 的 副作用 是 : Karma 在 捕获 浏览 器 时 可 能 会 超时 ， 尤 
其 是 如 果 本 地 机 器 运行 在 一 个 缓慢 的 网 络 连 接 上 的 话 。 因 此 ， 我 们 的 测试 可 能 因为 网 络 连 
9.2.4 评估 单元 测试 选项 

本 节 提 到 的 三 种 单元 测试 方式 一 一 NodeJS、Karma 和 Karma 加 上 Sauce 一 一 都 有 着 自 
己 的 权衡 。 在 Mocha 中 使 用 NodeJS 运行 测试 是 非常 易于 设置 的 、 可 靠 的 和 快速 的 ， 但 是 
它 并 未 考虑 不 同 JavaScript 执行 引擎 之 间 的 区 别 。 在 Karma 中 针对 本 地 浏览 器 运行 测试 是 
非常 快速 的 、 可 靠 的 ， 而 且 还 允许 对 多 个 JavaScript 引擎 进行 测试 ， 但 是 它 要 求 在 本 地 机 
器 中 安装 所 有 希望 测试 的 浏览 器 。 在 使 用 Karma 的 Sauce 云 中 运行 测试 是 非常 缓慢 和 不 可 
靠 的 ， 但 通过 这 种 方式 可 以 测试 多 个 JavaScript 引擎 ， 而 且 不 必 在 本 地 安装 额外 的 浏览 器 。 

哪 种 方式 最 优 取决 于 特定 应 用 的 需求 。 不 过 ， 特 定 于 浏览 器 的 问题 在 纯 单元 测试 的 领 
域 中 变 得 越 来 越 少见 了 。 特定 于 浏览 器 的 问题 通常 会 在 针对 实际 的 DOM 测 试 时 发 生 。 在 单 
元 测试 级 别 ， 大 多 数 特定 于 浏览 器 的 问题 都 发 生 在 使 用 JavaScript 日 期 对 象 时 ， 但 是 这 些 问 
题 都 可 以 通过 moment 这 样 的 库 进 行 改 善 。 往往 , NodeJS 就 可 以 满足 严格 的 单元 测试 。 不 过 ， 
在 下 一 节 中 将 看 到 : Karma 和 Sauce 在 运行 DOM 集 成 测试 时 也 有 着 不 可 思议 的 作用 。 
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9.3 DOM 集成 测试 


对 于 在 问题 破坏 生产 环境 之 前 捕捉 它们 来 说 ， 单 元 测试 是 非常 强大 和 出 色 的 工具 。 不 
过 ， 单 元 测试 并 未 捕捉 所 有 可 能 出 错 的 问题 。 即 使 代码 中 有 着 出 色 的 单元 测试 覆盖 率 ， 模 
块 之 间或 者 模块 和 DOM 之 间 的 集成 也 可 能 是 会 出 现 问 题 。 幸亏， AngularJS 提供 了 两 个 不 
同 的 强大 工具 集 ng-scenario 和 protractor， 用 于 运行 DOM 之 间 的 集成 测试 。 

第 一 个 工具 ng-scenario 将 使 用 过 ame 元 素 运行 测试 。 由 于 frame 方式 中 固有 的 限制 ， 
AngularJS 为 了 支持 第 二 个 工具 protractor， 是 不 建议 使 用 ng-scenario 的 。 而 且 ， 作 为 一 种 
安全 的 方式 ， 如 果 当 前 URL 在 一 个 不 同 的 域 中 ， 那 么 几乎 所 有 的 现代 浏览 器 中 都 不 允许 
JavaScript 代码 访问 过 ame 元 素 中 的 内 容 。 这 意味 着 我 们 的 测试 代码 必须 与 将 要 测试 的 目 
标 代码 运行 在 相同 的 域 中 ， 如 果 希 望 自动 测试 暂 存 服务 器 ， 这 是 一 个 重大 的 限制 。 不 过 ， 
ng-scenario 也 有 自己 的 优点 : 它 易于 创建 ， 并 且 使 用 起 来 不 那么 乏味 。 

另 一 方面 ，protractor 基于 Google 的 Selenium 浏览 器 自动 化 工具 。Selenium 是 一 个 用 
于 启动 和 控制 各 种 浏览 器 的 强大 工具 ，protractor 基于 Selenium 提供 了 一 个 AngularJS 友好 
的 层 。 尽 管 protractor 没有 angular-scenario 所 存在 的 ame 限制 ,但 是 它 的 问题 在 于 Selenium 
固有 的 限制 和 非 面向 测试 的 设计 决策 。 首 批 Selenium 用 户 经 常会 发 现 一 个 极其 令 人 泪 形 的 
问题 (或 者 功能 ， 这 取决 于 个 人 的 观点 ): 在 Selenium 任务 不 可 见 的 元 素 上 调用 clickO 时 ， 
它 将 抛 出 一 个 异常 。 尽 管 这 个 行为 从 Selenium 的 角度 来 看 是 正确 的 ， 但 是 实际 上 它 为 在 
Selenium 怪癖 范围 内 工作 的 用 户 界面 /用 户 体 验 (UVUX) 专 家 增加 了 许多 压力 。 

在 接 下 来 的 几 个 小 节 中 ， 将 学 习 如 何 使 用 这 两 个 工具 编写 DOM 集成 测试 。 将 要 编写 
的 测试 是 测试 DOM 交互 的 集成 测试 ， 而 不 是 服务 器 交互 。 该 服务 器 将 使 用 AgnularJS 方 
便 的 $httpBackend 服务 存根 (stubbed out)。 从 架构 角度 看 ， 这 些 测 试看 起 来 像 图 9-3。 


控制 器 + 服务 


指令 +DOM 服务 器 


DOM 集成 测试 
图 9-3 


9.3.1 S$httpBackend 指南 
在 单元 测试 一 节 中 ， 我 们 为 AngularJS 作用 域 创建 了 一 个 模拟 的 存根 。 作 用 域 是 简单 
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的 对 象 ， 但 是 模拟 复杂 的 Shttp 服务 可 能 有 点 麻烦 。 幸 亏 ，AngularJS 提供 了 一 个 方便 的 
S$httpBackend 对 象 ， 它 将 允许 我 们 使 用 $http 存根 用 于 测试 。$httpBackend 对 象 提 供 了 大 量 
的 辅助 函数 ， 它 们 将 使 服务 器 交互 存根 化 变 得 不 那么 复杂 ， 这 是 集成 测试 的 关键 。 在 集成 
测试 的 过 程 中 可 以 执行 多 个 服务 器 请 求 。 

S$httpBackend 服务 被 定义 在 ngMock 模块 中 。AngularJS 文档 指定 了 两 个 不 同 的 
$httpBackend 对 象 : 用 于 单元 测试 的 对 象 在 ngMock 模块 中 ， 用 于 集成 测试 的 对 象 在 
ngMockE2E 模块 中 ; 不 过 ， 它 们 都 被 打包 到 了 一 个 文件 中 : angular-mocks.js。 因 此 ， 只 需 
要 下 载 angular-mocks.js 文件 ,使 用 bower install angularmocks 或 者 code.angularjs.org 均 可 。 
为 了 方便 起 见 ，AngularJS v1.2.16 所 使 用 的 angular-mocks.js 文件 已 经 被 包含 在 了 本 章 的 样 
例 代码 中 。 在 本 节 的 样 例 中 ， 将 使 用 ngMock 模块 中 定义 的 对 象 ， 不过， 在 集成 测试 中 ， 
将 使 用 ngMockE2E 模块 中 的 对 象 。 这 两 个 ShttpBackend 对 象 之 间 的 区 别 是 非常 微妙 的 : 
ngMockE2E 模块 中 的 服务 有 一 个 passthrough 函数 ， 用 于 指定 通过 模拟 $http 服务 发 送 并 与 
真正 服务 器 交互 的 特定 路 由 ， 而 ngMock 模块 中 的 服务 则 缺少 这 个 功能 。 因 为 本 节 不 会 使 
用 passthrough 函数 ， 所 以 这 两 个 函数 模块 实际 上 是 可 以 相互 交换 的 。 


注意 : 

ngMock 模块 有 一 个 重要 的 限制 : 它 依 赖 于 全 局 window 对 象 中 存在 的 AngularJS， 如 
果 不 使 用 某 种 欺骗 方式 的 话 ， 它 就 无 法 在 NodeJS 中 运行 。 如 果 选 择 在 NodeJS 中 运行 单元 
测试 ， 那 么 请 编写 自己 的 Shttp 存根 版 本 ， 而 不 是 使 用 $httpBackend。 


通过 一 个 样 例 学 习 $httpBackend 是 非常 直观 的 。 回 顾 一 下 之 前 单元 测试 小 节 中 使 用 的 
MyFormController， 它 将 验证 用 户 输入 的 用 户 名 和 电子 邮件 : 


function MyFormController ($scope, S$http) { 
$scope.userData = {}; 
$scope.errorMessages = []; 


$scope.saveForm = function() { 
$scope.saving = true; 
$http. 
put('/api/submit', $scope.userData). 
success (function(data) { 
$scope.saving = false; 
$scope.success = true; 
}). 
error (function(err) { 
$scope.saving = false; 
$scope.error = err; 
1D); 
ys 


$scope.validateForm = function() { 
var validationFunctions = [ 
| 
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fn: function() { 
return !!$scope.userData.name 


}, 
message: 'Name required" 


fn: function() { 
return !!$scope.userData.email 


}, 
message: "Email required' 


hs 
$scope.errorMessages = []; 


for (var i = 0; i < validationFunctions.length; ++i) { 
if (!validationFunctions[i].fn()) { 


$scope.errorMessages.push (validationFunctions [i] .message); 


} 
} 
return $scope.errorMessages; 
3 
} 


注意 ， 为 使 ShttpBackend 在 测试 中 可 用 ， 需 要 对 Kanma 配置 文件 做 一 点 小 小 的 修改 ， 


同时 包含 AngularJS 和 ngMock 模块 。 这 是 因为 ngMock 模块 依赖 于 全 局 window 对 象 中 存 


在 的 AngularJS。 
// 浏览 器 将 要 加 载 的 文件 /模式 列表 


files: [ 
'./angular.js', 
'./angular-mocks.js', 
'./my_form controller.js', 
'./my_form controller.test.js', 
'./my_form controller.http backend.test.js' 


Ys 


新 增加 的 my_form_controller.http_backend.test.js 文件 包含 了 一 个 简单 的 单元 测试 ， 使 


用 $httpBackend 测试 saveForm 函数 : 


describe ('MYFormController'， function() { 
describe('saveForm', function() { 
Var $httpBackend, S$rootSscope, createController; 


beforeEach (inject (function($injector) { 


// 设置 模拟 http 服务 响应 


$httpBackend = $injector.get('$httpBackend'); 


// 持 有 作用 域 ( 即 根 作用 域 ) 


$rootscope = $injector.get('$rootscope'); 
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// 使 用 $controller 服务 创建 控制 器 的 实例 


Var $controller = $injector.get('$controller'); 


createController = function() { 
return $controller('MyFormController', { 
'$scope' : $rootScope 
1D); 
}; 
3))3 


it('should handle a successful server request', function() { 


createController (); 


$httpBackend.when('PUT', '/api/submit') .respond(200, {}); 


$rootscope.saveForm(); 
assert.ok($rootscope.saving); 
$httpBackend.flush(); 


assert.ok(!$rootscope.saving); 
assert.ok($rootscope.success); 


}); 


it('should handle server-side error', function() { 
createController(); 


$httpBackend.when('PUT', '/api/submit') .respond( 
500, 
{ error: 'Oops' }); 


$rootscope.saveForm(); 
assert.ok($rootscope.saving); 
$httpBackend.flush(); 


assert.ok(!$rootscope.saving); 
assert.ok(!$rootSscope.success); 
assert.equal('Oops', $rootscope.error.error); 
]) 
]) 
DD); 


在 之 前 的 代码 中 ，S$httpBackend 提 供 了 一 种 配置 存根 化 Shttp 对 象 的 方式 ， 它 将 通过 


AngularJS 的 inject 函 数 传 入 到 控制 器 中 。 你 之 前 可 能 从 未 见 过 inject 函 数 ， 因 


为 它 很 少 在 测 


试 代 码 和 AngularJS 核 心 之 外 使 用 。 函 数 inject 将 手动 地 执行 AngularJS 中 基于 名 称 的 依赖 注 
入 。 在 本 例 中 ， 它 将 把 $scope 设 置 给 SrootScope 变 量 ， 使 用 $httpBackend 配 置 $http 存 根 ， 然 
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后 执行 MyFormController 函 数 。 注 意 ， 不 需要 修改 $http 自 身 ， 修改 $httpBackend 就 足够 了 。 
通过 $httpBackend 中 的 when 函数 ， 可 以 使 用 $http 指定 服务 器 调用 的 结果 。 函 数 when 
将 使 用 为 可 读 性 所 设计 的 流 语法 ， 例 如 下 面 的 调用 : 


$httpBackend.when('PUT', '/api/submit').respond(200, {1}); 


该 代码 将 告诉 ShttpBackend， 当 测试 代码 发 送 HITP PUT 请 求 到 /api/Submit 路 由 时 ， 
结果 将 返回 HTTP 状态 200( 意 味 着 请 求 成 功 处 理 ) 和 一 个 空 响应 体 . 如 果 测 试 代码 使 用 when 
函数 发 送 HTTP 请 求 时 , 尚未 配置 适当 的 ShttpBackend, 那么 ShttpBackend 将 抛 出 一 个 错误 ， 
并 引起 测试 失败 。 

关于 $httpBackend 还 有 一 个 重要 细节 : 它 将 异步 进行 操作 ， 所 以 需要 调用 flush 函数 ， 
将 响应 发 送 到 代码 的 HTTP 请 求 中 。 这 对 于 测试 中 间 状 态 来 说 是 非常 有 用 的 ， 例 如 ， 测 试 
saving 变量 在 validateForm 被 调用 之 后 ， 但 在 HITP 响应 返回 之 前 是 否 为 真 。 这 个 异步 行 
为 对 于 测试 长 时 间 运 行 的 请 求 也 是 非常 有 用 的 ， 例 如 测试 一 个 HTTP 请求 的 超时 问题 。 不 
过 注意 ，flush 函数 不 接受 参数 ， 所 以 不 可 以 刷新 指定 的 请 求 。 函 数 flush 将 使 所 有 未 完成 
的 HTTP 请 求 都 收 到 它们 的 结果 。 

现在 我 们 已 经 了 解 了 $httpBackend 是 如 何 工 作 的 ， 接 下 来 将 使 用 $httpBackend、 
protractor 以 及 ng-scenario 编写 一 些 复杂 的 DOM 集成 测试 。 再 次 ， 记 住 DOM 集成 测试 在 
AngularJS 架构 中 是 什么 样 的 。DOM 集成 测试 将 使 用 存根 化 服务 器 与 页 面 中 的 DOM 元 素 
进行 交互 ， 或 者 (实际 上 ) 使 用 伪 后 端 执行 端 到 端 测试 。 


9.3.2 ”将 要 测试 的 页 面 


在 接 下 来 的 两 个 小 节 中 ， 将 为 使 用 了 MyFormController 代码 的 HTML 页 面 编写 一 组 
DOM 集成 测试 。 首 先 ， 请 看 将 要 测试 的 HTML 页 面 my_form.html。 该 页 面 可 能 不 是 最 复 
杂 的 AngularJS 页 面 ， 但 是 为 该 页 面 编 写 的 测试 演示 了 测试 复杂 应 用 所 需 的 基本 原则 : 


<body ng-controller="MyFormController"> 

<hl>This is a Form</hl> 

<hr> 

<h2>Name</h2> 

<input type="text" 
ng-model="userData.name"> 

<h2>Email</h2> 

<input type="text" 
ng-model="userData.email"> 


<hr> 
<input type="submit™" 
value="Save" 
ng-click="validateForm() .length === 0 && saveForm()"> 
<h2 ng-show="saving">Saving...</h2> 
<h2 ng-show="success">Saved!</h2> 
<div ng-show="errorMessages.length > 0"> 
<h3>Errors occurred:</h3> 
<div ng-repeat="message in errorMessages"> 
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{{ message }} 
</div> 
</div> 
</body> 
另外 ， 使 用 ng-scenario 和 protractor 运行 测试 时 需要 Web 服务 器 。 使 用 NodeJS 创建 
Web 服务 器 用 于 提供 静态 内 容 有 多 种 方式 ， 但 是 出 于 本 章 的 目的 ， 将 使 用 node-static 模块 
和 简单 的 serverjs 脚本 。 


var static = require('node-static'); 


var fileServer = new static.Server('./'); 


require('http') .createServer (function (request, response) { 
request .addListener('end', function () { 
fileServer.serve (request, response); 
}) .resume (); 
}) .listen(8080); 
现在 ， 运 行 node serverjs 命令 将 在 8080 端口 上 启动 一 个 Web 服务 器 ， 它 提供 了 本 章 
源 目录 中 的 内 容 。 启 动 服 务 器 之 后 ， 请 在 浏览 器 中 访问 http://localhost:8080/my_form html， 
查看 实际 中 这 个 简单 的 表单 页 面 。 
9.3.3 ”使 用 ng-scenario 执行 DOM 集成 测试 
ng-scenario 框架 是 一 个 简单 的 E2E( 端 到 端 ) 集 成 测试 工具 。 它 将 通过 控制 一 个 过 ame 
元 素 的 方式 运行 ， 并 将 提供 一 个 API 用 于 操作 过 ame 元 素 。 为 支持 protractor，AngularJS 
团队 目前 将 ng-scenario 看 作 是 废弃 的 。 不 过 ， 根 据 个 人 的 用 例 ， 与 protractor 相 比 ， 它 可 
能 是 更 好 的 工具 。 在 接 下 来 的 两 个 小 节 中 ， 将 了 解 这 两 种 框架 之 间 的 权衡 ， 首 先 从 
ng-scenario 开始 。 
尽管 不 是 必须 结合 使 用 Karma 和 ng-scenario, 但 是 Karma 通过 负责 启动 浏览 器 和 在 命 
令 行 中 提供 输出 的 方式 ， 可 以 使 ng-scenario 的 使 用 更 加 简单 。 就 像 Mocha 和 Chai 一 样 ， 
通过 npm， 可 作为 Karma 框架 使 用 ng-scenario。 可 将 karma-ng-scenario 作为 依赖 包含 在 
package.json 文件 中 ， 并 运行 npm install: 


"dependencies": { 
mockhaws E20 1 
“kam "Del2.16"; 
"karma-chai": "0.1.0", 
"karma-mocha": "0.1.4", 
"karma-ng-scenario": "0.1.0", 
"karma-chrome-launcher": "0.1.4"， 
"karma-sauce-launcher": "0.2.8" 

} 


现在 我 们 已 经 安装 了 ng-scenario, 接 下 来 要 创建 另 一 个 Karma 配置 文件 和 Makefire 规 
则 。 下 面 是 karma-ng-scenario.confjs 文件 , 这 个 Karma 配置 只 需要 加 载 一 个 文件 :my _form_ 
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controller.ng-scenario.test.js( 浏 览 器 应 该 运行 的 测试 套件 )。 它 还 需要 包含 ng-scenario 框架 并 
创建 一 个 代理 。 该 代理 将 告诉 Karma 本 地 Web 服务 器 的 位 置 ， 所 以 当 告 诉 ng-scenario 访 
问 my formhtml 时 ，Karma 知道 如 何 访 问 (http://localhost:8080/my form.html)。 而 且 ， 


ng-scenario 提供 了 自己 的 断言 框架 , 与 Chai 相 比 ， 它 更 易于 与 ng-scenario 
不 需要 包含 Chai 框架 : 
module.exports = function(config) { 


config.set({ 
basePath: "'', 


// 将 要 使 用 的 框架 
// 可 用 的 框架 : https:// npmjs.org/browse/keyword/karma-adapter 
frameworks: ['ng-scenario', 'mocha'], 


// 在 浏览 器 中 加 载 的 文件 /模式 列表 
lop 下 
'./my_form controller.ng-scenario.test.js', 
], 
reporters: ['progress'], 
proxies : { 
'/': 'http://localhost:8080' 
}, 


// web 服务 器 端口 
port: 8080, 


runnerPort: 9100, 


// 启用 /禁用 输出 (报告 和 日 志 ) 中 的 颜色 


Colors: true, 


logLevel: config.LOG DEBUG, 


// 是 否 监 视 文件 并 在 文件 改变 时 执行 测试 


autoWatch: false, 


// 启动 这 些 浏 览 器 


起 使 


// 可 用 的 浏览 器 启动 器 : https:// npmjs.org/browse/keyword/karma-launcher 


browsers: ['Chrome'], 


， 因 此 
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// 持续 集成 模式 
// 如 果 为 真 ，Karma 将 捕获 浏览 器 、 运 行 测试 并 退出 
singleRun: true 

]) 

] 

我 们 只 在 Chrome 中 运行 这 些 测试 ， 并 且 启 用 了 单线 程 运行 模式 ， 所 以 Karma 在 测试 
运行 之 后 将 退出 。 使 用 单线 程 运 行 模式 的 原因 是 : 集成 测试 通常 比 单元 测试 慢 许 多 ， 所 以 
通常 不 需要 在 每 次 保存 改动 之 后 都 运行 它们 。 除 了 该 配置 文件 ， 还 需要 在 Makefile 中 添加 
另 一 个 规则 : 

karma-ng-scenario: 

./node modules/karma/bin/karma start karma-ng-scenario.conf.js 


遗憾 的 是 ，$httpBackend 有 两 个 重要 的 限制 。 首 先 ， 出 于 测试 的 目的 ，$httpBackend 
必须 定义 在 被 测试 的 代码 中 ， 而 不 是 测试 代码 中 。 其 次 ，$httpBackend 将 在 一 个 私有 数组 
中 存储 when 条 件 ， 所 以 一 旦 设置 了 when 条 件 ， 就 无 法 改变 它 。 但 是 如 你 所 见 ， 对 于 这 些 
重要 的 限制 ， 我 们 有 一 些 合理 的 改善 方案 可 以 避免 ShttpBackend 这 些 问题 。 

下 面 是 my_formhtml 的 头 部 代码 ， 其 中 包含 了 $httpBackend 。 注 意 该 代码 将 把 
S$httpBackend 附 加 到 全 局 window 对 象 中 。 当 真正 编写 测试 代码 时 ， 这 个 决定 的 原因 将 变 得 
更 加 清晰 。 


<script type="text/javascript" src="/angular.js"></script> 
<script type="text/javascript" src="/angular-mocks.js"></script> 
<script type="text/javascript"> 

var app = angular.module('domTest', ['ngMockE2E']); 


app.config(function($provide) { 
$provide.decorator ('$httpBackend', 
angular.mock.e2e.$httpBackendDecorator); 
1); 


// 定义 伪 后 端 
app.run (function($httpBackend, S$window) { 
S$Swindow.$httpBackend = $httpBackend; 
1); 
</script> 
<script type="text/javascript" src="/ 
my_form controller.js"></script> 


现在 需要 编写 my_form _controller.ng-scenario.testjs 文件 了 。 有 三 种 情景 需要 测试 。 第 
一 ， 测 试用 户 是 否 正确 地 输入 了 他 们 的 信息 ， 他 们 将 看 到 一 个 确认 。 第 二 ， 测 试 当 用 户 未 
输入 信息 时 是 否 看 到 错误 信息 。 第 三 ， 测 试 当 服 务 器 中 出 现 错误 时 ， 是 否 显示 了 正确 的 错 
误 消息 。 下 面 使 用 了 ng-scenario 的 三 个 测试 : 


descripe('MyForm', function() { 
it('should submit successfully', function() { 
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browser () .navigateTo('/my form.html'); 
httpBackend(200, {}); 


input('userData.name') .enter('Victor Hugo'); 
input('userData.email') .enter('les@miserabl.es'); 
element ('input [type=submit]') .click(); 


expect (element ('#saved') .css('display')) .not() .toBe('none'); 
expect (element ('#saving') .css('display')) .toBe('none'); 
expect (element ('#errors') .css('display')) .toBe('none'); 

]) 


it('should show errors properly', function() { 
browser () .navigateTo('/my form.html'); 


httpBackend (200, {}); 
element ('input [type=submit]') .click(); 


expect (element ('#saved') .css('display')) .toBe('none'); 
expect (element ('#saving') .css('display')) .toBe('none'); 
expect (element ('#errors') .css('display')) .not() .toBe('none'); 


expect (epeater (' .error-message') .count () ) .toBe (2); 
expect (element (' .error-message:nth-of-type(1)') .html ()) 
.toCcontain ('Name required'); 
expect (element (' .error-message:nth-of-type(2)") .html()) 
.toCcontain ('Email required'); 
DD); 


it('should handle server errors', function() { 
browser () .navigateTo('/my_form.html'); 


httpBackend(500, { error: 'Internal Server Error' }); 


input ('userData.name') .enter('Victor Hugo'); 
input ('userData.email') .enter('les@miserabl.es'); 
element ('input [type=submit]') .click(); 


expect (element ('#saved') .css('"'display')) .toBe('none'); 
expect (element ('#server-error') .css('display')) .not() .toBe('none'); 
expect (element ('#server-error') .html ()) 

.toContain('Server Error: Internal Server Error'); 


angular.scenario.dsl('httpBackend', function() { 
return function(code, response) { 
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return this.addFutureAction('tweaking $httpBackend', 
function(window, document, done) { 
window.S$httpBackend.when('PUT', '/api/submit') .respond(code， 
response); 
done(); 
1D; 
] 7 

]}) 7 

请 注意 之 前 的 DSL 代 码 。DSL 代 表 域 特定 语言 。 对 于 ng-scenario 来 说 ， 通 过 DSL 可 以 定 
义 操 作 测 试 页 面 中 window 和 document 对 象 的 函数 。 因 为 my_form.html 将 把 ShttpBackend 公 
开 为 window 对 象 的 属性 ， 所 以 通过 DSL 测 试 代码 可 以 为 ShttpBackend 设 置 正确 的 行为 。 

你 可 能 好 奇 为 什么 这 些 测试 将 使 用 expect 函数 做 断言 ， 而 不 是 使 用 assertequal。 这 是 
因为 调用 ng-scenario 的 element.css 函数 (例如 element(#saved).css(display)) 将 返回 一 个 
名 ture， 而 不 是 一 个 真正 的 字符 串 值 。 换 句 话说 ，element'css 的 返回 值 是 异步 操作 的 对 象 封 
装 器 , 实际 的 断言 只 应 该 在 异步 操作 完成 时 执行 。 函 数 expect 将 封装 所 有 混淆 的 异步 行为 ， 
并 让 我 们 在 编写 测试 代码 时 就 当 它 是 同步 的 一 样 。 


注意 : 

future 设计 模式 被 用 于 处 理 异 步 计算 的 值 。 它 与 更 加 知名 的 约定 设计 模式 关系 非常 紧 
密 。future 是 一 个 对 象 ， 它 将 被 用 作 将 来 某 个 时 间 点 被 计算 的 值 的 占 位 符 。 出 于 ng-scenario 
的 目的 ,除了 这 个 一 句 话 的 定义 之 外 ,我 们 不 需要 知道 任何 与 future 相关 的 事情 ,因为 expect 
防 数 允许 我 们 与 future 进行 交互 ， 就 像 它们 是 简单 的 数字 和 字符 串 一 样 。 


函数 browser、input 和 element 都 是 由 ng-scenario 提供 的 。 实 际 上 ，ng-scenario 提供 了 
丰富 的 工具 集 用 于 浏览 器 交互 。 可 以 在 code.angularjs.org/1.2.16/docs/guide/e2e-testing 中 看 
到 一 个 完整 的 列表 。 不 过 ， 函 数 browser、input 和 element 是 最 常用 的 。 

函数 browser 对 于 navigateTo 函数 是 非常 有 用 的 ， 之 前 的 代码 使 用 它 告诉 浏览 器 在 每 
个 测试 启动 时 加 载 my_formhtml。 函 数 input 公开 了 一 个 称 为 enter 的 函数 ， 该 函数 将 设置 
字符 串 输入 的 值 , 并 在 测试 页 面 中 调用 scope.$apply。 函数 element 将 让 我 们 使 用 jQuery API 
的 一 个 子 集 来 查询 和 修改 测试 页 面 中 的 元 素 。 例 如 ，element(#saved).css(display) 函 数 调用 
将 返回 一 个 fature, 用 于 代表 ID 为 saved 的 DOM 元 素 中 层 秋 样式 表 (CSS)display 属性 的 值 。 

现在 我 们 已 经 阅读 了 测试 代码 ， 接 下 来 该 真正 地 运行 测试 了 。 使 用 node serverjs 启动 
Web 服务 器 ,并 在 一 个 单独 的 终端 窗口 中 运行 make karma-ng-scenario 命令 。 我 们 应 该 看 到 
如 下 所 示 的 输出 : 


Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 0 of 3 SUCCESS (0 secs / 0 secs) 

DEBUG [proxy]: proxying request - /my_form.html to localhost:8080 

DEBUG [proxy]: proxying request - /angular.js to localhost:8080 

DEBUG [proxy]: proxying request - /angular-mocks.js to localhost:8080 

Chrome 35.0.1916 (Mac OS X 10.9.2) : Executed 2 of 3 SUCCESS (0 secs / 0.434 
secs 

Chrome 35.0.1916 (Mac OS X 10.9.2): Executed 3 of 3 SUCCESS (0 secs / 0.564 
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secs 

Chrome 35.0.1916 (Mac OS X 10.9.2) : Executed 3 of 3 SUCCESS (0.596 secs / 
0.564 secs) 

DEBUG [karma]: Run complete, exitting. 

DEBUG [launcher]: Disconnecting all browsers 

DEBUG [launcher]: Process Chrome exited with code 0 

DEBUG [temp-dir]: Cleaning temp dir /var/folders/7h/... 


为 ng-scenario 集成 测试 使 用 Karma 的 强大 之 处 在 于 : 易于 与 Sauce 进行 集成 。 回 顾 一 
下 ， 我 们 已 经 使 用 Sauce 为 运行 单元 测试 在 云 中 提供 了 浏览 器 。 可 以 在 ng-scenario 样 例 中 
使 用 相同 的 方式 ! Karma 甚至 将 创建 一 个 通道 ， 使 Sauce 浏览 器 可 以 与 本 地 服务 器 通信 。 
不 需要 修改 my_form controllerng-scenario.testjs 中 定义 的 集成 测试 。 只 需要 创建 一 个 新 的 
Karma 配置 文件 karma-ng-scenario-sauce.confjs 即 可 : 


module.exports = function(config) { 
Var customLaunchers = { 

sl firefox: { 
base: 'SauceLabs', 
browserName: 'firefox', 
version: '27' 

}, 

sl safari: { 
base: 'SauceLabs', 
browserName: 'safari', 
platform: 'OS X 10.6', 
Version: '5' 

}, 

sl ie 9: { 
base: 'SauceLabs', 
browserName: 'internet explorer', 
platform: 'Windows 7', 
version: '9' 

} 

}; 


config.set({ 
basePath: '', 


frameworks: ['ng-scenario', 'mocha']， 


// 浏览 器 将 要 加 载 的 文件 /模式 列表 
files: [ 

'./my_form controller.ng-scenario.test.js', 
]， 


reporterss: [Gots' "saucelabs’]s 


proxies : { 
'/': "http://localhost:8080" 


293 


AngularJS 高 级 编程 


]}， 


// Web 服务 器 端口 
port: 8080, 


runnerPort: 9100, 


// 在 输出 (报告 和 日 志 ) 中 启用 /禁用 颜色 


colors: true, 

logLevel: config.LOG DEBUG, 

autoWatch: false, 

customLaunchers: customLaunchers, 
browsers: Object.keys (customLaunchers), 
singleRun: true, 


sauceLabs: { 
testName: 'Web App Integration Tests - ' + (new Date()) .toString() 


}, 
1 
7 
恭喜 ! 你 已 经 成 功 使 用 Karma 和 ng-scenario 在 Internet Explorer 9、Safari 5 和 Firefox 
中 运行 了 DOM 集成 测试 。 如 你 所 见 ，ng-scenario 是 非常 强大 的 、 简 单 的 ， 而 且 所 需 的 设 
置 最 少 。 另 外, 通过 Karma 的 通道 能 力 ， 可 以 在 外 部 浏览 器 中 运行 测试 , 例如 在 Sauce 中 。 
不 过 ng-scenario 使 用 过 ame 的 方式 有 两 个 重要 的 限制 。 第 一 ,用 户 不 会 在 过 ame 中 运 
行 目 标 页 面 ， 所 以 我 们 的 测试 无 法 准确 地 复制 用 户 环境 。 第 二 ， 需 要 从 运行 服务 器 的 相同 
机 器 中 运行 ng-scenario 测试 。 对 于 开发 工作 来 说 这 个 限制 并 不 重要 ， 但 是 对 于 测试 通过 
Heroku 部 署 的 一 个 远程 开发 服务 器 、 测 试 无 法 通过 SSH 访问 的 服务 器 或 者 测试 无 法 启动 
浏览 器 的 服务 器 ， 该 怎么 办 呢 ? 使 用 ng-scenario 和 Sauce 可 以 指定 一 个 全 面 的 测试 策略 ， 
但 是 这 些 限 制 对 于 某 些 组 织 来 说 可 能 是 极其 关键 的 。 下 一 节 将 要 讲解 的 protractor 没有 这 些 
限制 。 


9.3.4 使 用 protractor 执行 DOM 集成 测试 


protractor 提供 另 一 种 DOM 集成 和 E2E 测试 的 测试 方法 .与 ng-scenario 不 同 ,protractor 
有 自己 的 配置 方法 ， 而 且 不 应 该 与 Karma 一 起 使 用 。protractor 允许 将 测试 和 服务 器 分 离 ， 
所 以 可 以 在 本 地 机 器 的 一 个 脚本 中 测试 暂 存 服务 器 或 者 甚至 是 生产 服务 器 。protractor 将 独 
家 使 用 Jasmine 测试 框架 ， 但 是 Jasmine 和 Mocha 几乎 是 可 以 相互 交换 的 ， 所 以 很 难 区 分 
它们 。 

与 本 章 所 学 习 的 其 他 模块 一 样 ， 可 以 通过 npm 获得 protractor。 应 该 将 protractor 添加 
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为 packagejson 中 的 一 个 依赖 ， 并 运行 npm install。 另 外 ， 为 了 运行 使 用 了 protractor 的 测 
试 ， 需 要 运行 一 个 Web 服务 器 ， 因 此 我 们 还 需要 使 用 node-static 模块 (之 前 本 章 的 “使 用 
ng-scenario 执行 DOM 集成 测试 ”一 节 中 已 经 介绍 了 它 )。 
"dependencies": { 
aacha™s “L206” 
"karma™: “Des12.16" 
"karma-chai": "0.1.0", 
"karma-mocha": "0.1.4"， 
"karma-ng-scenario": "0.1.0"， 
"karma-chrome-launcher": "0.1.4"， 
"karma-sauce-launcher": "0.2.8", 
"node-static": "0.7.3"， 
"protractor": "0.24.2" 
}, 
protractor 依赖 于 开源 Selenium 项 目的 WebDriverJS 工具 。WebDriverJS 无 法 通过 npm 
获得 ， 但 是 protractor 提供 了 一 个 工具 用 于 安装 和 管理 WebDriverJS。 首 先 ， 为 了 安装 
WebDriverJS， 请 运行 下 面 的 命令 : 


./node modules/protractor/bin/webdriver-manager update 

完成 后 ， 启 动 WebDriverJS: 

./node modules/protractor/bin/webdriver-manager start 

因为 protractor 是 基于 Selenium 的 ， 而 且 是 与 测试 页 面相 分 离 的 ， 所 以 它 缺 少 “使 用 
ng-scenario 执行 DOM 集成 测试 ”一 节 中 所 提 到 的 DSL 功能 。 因 此 ， 需 要 提供 自己 的 方式 ， 
用 于 在 测试 页 面 中 配置 存根 $httpBackend。 最 简单 的 方式 就 是 创建 一 个 单独 的 页 面 
Imy_form .protractorhtml,， 它 将 基于 提供 的 查询 参数 配置 页 面 的 ShttpBackend。 下 面 是 在 这 个 
新 页 面 中 设置 $httpBackend 所 使 用 的 JavaScript 代码 : 


var parseQueryString = function(querystring) { 
Var params = {}; 
pairs = queryString.split(n&n) 7 


for (var i = 0; i < pairs.length; ++i) { 

var pair = pairs[i].split('='); 

params [pair[0]] = decodeURIComponent (pair[1]); 
} 


return params; 
1; 


Var app = angular.module('domTest', ['ngMockE2E"']); 


app.config (function($provide) { 
$provide.decorator('$httpBackend', 
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angular.mock.e2e.$httpBackendDecorator); 
Ds 


// 定义 伪 后 端 
app .run (function($httpBackend, S$window) { 
if ($window.location.href.indexOof('?') != -1) { 
var index = S$window.location.href.indexOof('?'); 
Var queryParams = 
parseQueryString ($window.location.href.substr (index + 1)); 
Var code = parseInt (queryParams.code || '200', 10); 
Var result = JSON.parse (queryParams.response || '{}'); 
$httpBackend.when('PUT', '/api/submit') .respond(code, result); 
return; 
} 
$httpBackend.when('PUT', '/api/submit').respond(200, {}); 
yys 


通过 这 些 人 额外 的 代码 ， 可 以 使 用 统一 资源 定位 符 (URL) 配 置 存根 后 端 。 例 如 ， 通 过 在 
浏览 器 中 访问 my_form.protractor.html?code=500，S$httpBackend 将 为 发 送 到 /api/submit 的 
PUT 请 求 返回 一 个 含有 HTTP 500 状态 的 空 响应 。 在 使 用 了 这 个 新 的 代码 之 后 ， 我 们 就 可 
以 编写 自己 的 第 一 个 protractor 测试 了 。 

下 面 的 代码 将 测试 之 前 ng-scenario 所 完成 的 3 个 样 例 。 如 果 回顾 一 下 该 节 的 内 容 ， 这 
些 测 试看 起 来 应 该 是 非常 熟悉 的 。 第 一 个 用 例 是 ， 如 果 用 户 输入 了 有 效 的 信息 ， 服 务 器 应 
该 返回 一 个 HITP 200 响应 ， 而 且 用 户 将 看 到 一 个 确认 信息 。 第 二 个 用 例 是 ， 如 果 用 户 输 
入 了 无 效 的 信息 ， 他 们 将 看 到 一 个 错误 信息 。 第 三 种 用 例 是 如 果 用 户 输入 了 有 效 的 信息 ， 
但 是 出 现 了 服务 器 错误 ， 那 么 用 户 将 看 到 一 条 消息 ， 通 知 他 们 服务 器 出 现 了 错误 。 下 面 是 
使 用 了 protractor 的 测试 代码 : 


describe('MyForm', function() { 
var ptor; 


beforeEach (function() { 
browser.get ('http://localhost:8081/my_form.protractor.html'); 
ptor = protractor.getInstance (); 

DD); 


it('should submit successfully', function() { 
element (by .model ('userData.name')) .sendKeys ('Victor Hugo'); 
element (by.model ('userData.email')).sendKeys('les@miserabl.es'); 


element (by.css('input [type=submit]')).click(); 


expect (element (by.css('#saved')). 
getCssValue('display')). 
toBe('block'); 
expect (element (by.css ('#saving')). 
getcssValue ('display')). 


第 9 章 测试 和 调试 AngularJS 应 用 


toBe('none'); 
expect (element (by.css('#errors')). 
getcssValue ('display')). 
toBe('none'); 
17); 


it('should show errors properly', function() { 
element (by.css('input[type=submit]')) .click(); 


expect (element (by.css ('#saved')). 
getCssValue('display')). 
toBe('none'); 
expect (element (by.css ('#saving')). 
getCcssValue('display'")) . 
toBe('none'); 
expect (element (by.css('#errors')). 
getCcssValue('display')) . 
toBe('block'); 


expect (element.all (by.css(' .error-message')) . 
count () ) .toBe (2) : 
expect (element (by.css (' .error-message:nth-of-type(1)')) . 
getText() ) . 
toContain('Name required'); 
expect (element (by.css (' .error-message:nth-of-type (2)')). 
getText ()). 
toCcontain('Email required'); 
DD); 


it('should handle server errors', function() { 
Var response = 
'%$7B%S20"error"%®%3A%20\"Internal®%20Server%®20Error"%20%7D"'; 
var url = 'http://localhost:8081/my_form.protractor.html?' + 
"code=500&' + 
"response=' + response; 
browser.get (url); 


element (by.model ('userData.name')) .sendKeys ('Victor Hugo'); 
element (by.model ('userData.email')).sendKeys('les@miserabl.es'); 


element (by.css('input [type=submit]')).click(); 


expect (element (by.css('#saved')). 
getcssValue('display')). 
toBe('none'); 
expect (element (by.css('#server-error')). 
getcssValue ('display')). 
toBe ("block"')sy 
expect (element (by.css('#server-error')). 
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getText () ) . 
toContain('Server Error: Internal Server Error'); 
DD); 
1D); 


与 ng-scenario 很 像 ， protractor 的 语法 被 设计 为 易于 阅读 的 。 但 遗憾 的 是 ，protractor 


语法 更 加 笨拙 和 复杂 。 之 前 高 亮 显示 的 代码 展示 了 几 个 常见 的 模式 ， 它 们 几乎 出 现在 所 有 
protractor 测试 中 。 而 且 ， 大 多 数 protractor 测试 主要 使 用 这 些 简单 模式 的 结合 。 下 面 是 这 
些 模式 的 细节 : 


// 使 用 ngModel='userData.name' 将 输入 字段 的 值 设置 为 'Victor Hugo'" 
element (by.model ('userData.name')) .sendKeys('Victor Hugo'); 


// 断言 匹配 CSs 选择 器 '#saved' 的 元 素 的 display CSS 属性 被 设置 为 'block' 
expect (element (by.css ('#saved')). 
getCssValue('display')). 
toBe('block'); 


// 单 击 一 个 匹配 css 选择 器 'input [type=submit] ' 的 元 素 
element (by.css('input [type=submit]')).click(); 


// 断言 页 面 中 有 两 个 匹配 Css 选择 器 ' .error-message' 的 元 素 
expect (element .all (by.css(' .error-message')). 
count () ) .toBe (2); 


// ' 断 言 类 设置 为 'error-message' 的 第 一 个 div 元 素 的 文本 中 包含 了 ′ Name required’ 
expect (element (by.css (' .error-message:nth-of-type(1)')). 
getText ()). 
tocontain ('Name required'); 


因为 protractor 不 使 用 Karma， 所 以 需要 使 用 protractor 自己 的 配置 格式 。 下 面 是 


protractor_confjs 的 代码 : 
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exports.config = { 
seleniumAddress: 'http://localhost:4444/wd/hub', 


// 将 被 传递 给 webdriver 实例 的 capabilities 
capabilities: { 

'browserName': 'chrome' 
}, 


// spec 模式 是 相对 于 调用 protractor 时 的 工作 目录 的 


specs: ["my form controller.protractor.teat.js’], 


// 将 被 传递 给 Jasmine-node 的 选项 
jasmineNodeOpts: { 
showColors: true, 
defaultTimeoutInterval: 30000 
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如 你 所 见 , protractor 的 配置 通常 是 非常 直观 的 。 值 得 一 提 的 一 个 细节 是 seleniumAddress 
变量 ， 它 是 Selenium 服 务 器 的 统一 资源 定位 符 (URD。 运 行 webdrivermanager start 命 令 将 在 
默认 的 端口 4444 上 启动 Selenium 服 务 器 。protractor 需 要 能 够 连接 到 这 个 可 运行 的 Selenium。 

另 一 个 值得 一 提 的 细节 是 : protractor 配置 文件 一 次 只 可 以 启动 一 个 浏览 器 ， 在 
capabilities.browserName 字段 中 指定 。 需 要 为 希望 测试 的 每 个 浏览 器 都 单独 使 用 一 个 
protractor 配置 。 

谈 到 多 浏览 器 ， 我 们 还 可 以 将 protractor 和 Sauce 集成 在 一 起 。 不 过 ， 使 用 Sauce 和 
protractor 针对 本 地 服务 器 运行 测试 ， 要 么 要 求 创建 自己 的 管道 功能 ， 要 么 需要 为 本 地 服务 
器 配置 一 个 域名 。 与 Karma 不 同 ，protractor 不 会 自动 创建 管道 。 不 过 ，protractor 的 强大 
之 处 在 于 能 够 测试 远 端 服务 器 ， 而 不 是 简单 地 测试 本 地 开发 服务 器 。 为 实现 这 个 目标 ， 下 
面 是 一 个 标准 的 protractor 样 例 (在 angularjs.org_protractorjs 文件 中 ), 它 将 测试 angularjs.org 
主页 : 


describe('angularjs homepage', function() { 
it('should greet the named user', function() { 
browser.get ('http://www.angularjs.org'); 


element (by.model ('yourName')) .sendKeys ('Professional AngularJs'); 
Var greeting = element (by.binding('yourName')); 


expect (greeting.getText () ) .togqual ('Hello Professional AngularJS!') 7 
DD); 
1); 


可 以 对 protractor 配置 做 一 点 小 小 的 修改 , 其 中 的 内 容 如 angularjs.org _protractor.confjs 
文件 所 示 : 


// 样 例 配置 文件 
exports.config = { 
// seleniumAddress: 'http://localhost:4444/wd/hub’', 


// 将 被 传递 给 webdriver 实例 的 capabilities 
capabilities: { 

'browserName': 'chrome' 
}, 


sauceUser: 'SAUCE USERNAME HERE', 
SauceKey: 'SAUCE API KEY HERE', 


// spec 模式 是 相对 于 调用 protractor 时 的 工作 目录 的 


specs: ['angularjs.org protractor.js'], 


// 将 被 传递 给 Jasmine-node 的 选项 
jasmineNodeOpts: { 
ShowColors: true, 
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defaultTimeoutInterval: 30000 
} 
二 
注意 , 该 代码 移 除了 seleniumAddress 字段 , 并 指定 了 sauceUser 和 sauceKey。 protractor 
为 Sauce 提供 了 内 置 支持 , 当 指 定 了 sauceUser 和 sauceKey, 但 未 指定 seleniumAddress 时 ， 
它 会 知道 连接 到 Sauce。 


9.3.5 评估 ng-scenario 和 protractor 


现在 我 们 已 经 使 用 ng-scenario 和 protractor 编写 了 基本 的 测试 ， 你 应 该 注意 到 了 这 两 
个 系统 中 固有 的 权衡 。protractor 是 测试 远 端 服务 器 (尤其 是 实现 端 到 端 测 试 ) 的 一 个 强大 工 
具 , 但 是 它 并 未 使 针对 本 地 服务 器 运行 的 DOM 集成 测试 变 得 简单 。 另 一 方面 ,ng-scenario 
可 以 使 开发 者 轻松 地 针对 本 地 服务 器 运行 测试 ， 允 许 开 发 者 使 用 DSL 函数 操作 页 面 ， 提 供 
更 加 优雅 和 简洁 的 语法 以 及 为 丰富 的 Karma 插件 社区 添加 插件 。 

ng-scenario 可 能 更 适合 于 大 多 数 应 用 ， 而 protractor 则 有 着 特定 的 优点 ， 尤 其 是 当 和 希望 
测试 和 衡量 真正 的 服务 器 时 。 不 过 ， 这 些 优点 是 以 更 加 难以 使 用 和 不 优雅 为 代价 的 。 另 一 
方面 ，ng-scenario 满 足 的 是 一 个 不 同 的 需求 : 在 本 地 机 器 中 测试 ， 而 不 必 部 署 到 真正 的 服 
务 器 中 。 通 常 与 protractor 相 比 ，ng-scenario 和 它 相 关 的 工具 更 加 成 熟 ， 而 且 提供 了 更 加 多 
样 的 功能 。 在 当前 这 种 把 测试 责任 更 多 地 移交 给 每 个 开发 者 的 范例 中 ，ng-scenario 在 测试 
AngularJS 应 用 中 仍然 有 着 重要 的 作用 。protractor 可 能 是 AngularJS 测 试 的 未 来 ， 但 是 
ng-scenario 就 是 现在 ， 优 秀 的 AngularJS 开 发 者 应 该 同时 熟悉 这 两 种 技术 。 


9.4 调试 AngularJS 应 用 


AngularJS 是 基于 这 么 一 个 哲学 构建 的 : 自动 化 测试 应 该 在 用 户 有 机 会 遇 到 问题 之 前 捕 
获 它们 。 不 过 ， 终 端 用 户 特别 擅长 在 代码 中 寻找 问题 ， 要 么 是 偶然 的 ， 要 么 是 故意 的 。 无 
可 避免 地 ， 每 个 项 目 都 有 自己 的 问题 。 幸亏 ，JavaScript 拥有 大 量 各 种 各 样 的 调试 工具 。 在 
本 节 ， 将 学 习 使 用 debug 模块 和 Chrome 开发 者 工具 调试 应 用 。 
9.4.1 debug 模块 

尽管 不 缺少 JavaScript 调试 器 , 但 是 JavaScript 还 是 提供 了 一 个 调试 日 志 模 块 , 它 是 如 
此 的 强大 和 优雅 ， 并 因此 捍卫 了 自己 的 地 位 。 通 过 打印 语句 进行 调试 是 有 争议 的 。 一 些 开 
发 者 认为 这 是 糟糕 的 实践 ,而 另 一 些 开发 者 在 数 年 间 除 了 打印 语句 之 外 并 未 使 用 调试 工具 。 
本 节 内 容 在 这 个 话题 上 保持 中 立 ， 并 将 同时 为 这 两 种 方式 展示 相应 的 工具 。 毕 竟 如 传奇 算 
计 科学 家 Brian Kernighan 曾经 说 过 的 ,“The most effective debugging tool is still careful 
thought，coupled with judiciously Placed print statements (UNIX for Beginners, Brian 
Kernighan, Bell Laboratories, 1978) 。 

当 在 不 允许 插入 断 点 或 者 使 用 其 他 常见 调试 器 工具 的 旧版 浏览 器 中 调试 问题 时 ， 就 必 
须 使 用 这 种 方式 了 。 
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模块 debug 可 以 通过 npm 获得 。 尽 管 该 模块 自身 是 为 NodeJS 构建 的 ， 但 是 debug 模 
块 也 包含 了 一 个 浏览 器 友好 的 dist/debugjs 文件 。 遗 憾 的 是 ， 该 文件 并 未 通过 npm 进行 分 
发 ,所 以 需要 自己 从 github.com/visionmedia/debug 的 GitHub 仓库 中 直接 下 载 。 为 方便 起 见 ， 
本 章 样 例 代码 中 包含 了 debugjs 的 v1.0.2 版 本 ， 在 浏览 器 可 以 通过 script 标记 包含 它 。 

模块 debug 公开 了 一 个 函数 : 在 浏览 器 中 全 局 可 用 的 debug0， 它 将 为 指定 的 命名 空间 
生成 一 个 调试 记录 器 。 命 名 空间 是 调试 记录 器 的 一 个 唯一 标志 符 。 通 常 ， 命 名 空间 是 希望 
调试 的 AngularJS 控制 器 、 服 务 或 者 指令 的 名 称 。 下 面 是 一 个 如 何 为 MyFormController 使 
用 调试 模块 的 样 例 .可 以 在 样 例 代 码 的 my _form controller'debugjs 文件 中 找到 下 面 的 代码 : 

function MYFormController ($scope，S$Shttp，S$Swindow) { 

if ($window.query && S$window.query.debug) { 
debug .enable('MyFormController'); 


} else { 
debug.disable('MyFormController'); 


} 

var d = debug('MyFormController'); 
d('loaded'); 

$scope.userData = {}; 
$scope.errorMessages = []; 


$scope.saveForm = function() { 
$scope.saving = true; 
d('saving form...'); 
s$http. 
put('/api/submit', $scope.userData). 
success (function(data) { 
d('save form success'); 
$scope.saving = false; 
$scope.success = true; 
}). 
error (function (err) { 
d('save form failed: ' + err); 
$scope.saving = false; 
$scope.error = err; 
Es 
Fs 
#3 


如 果 运 行 之 前 的 代码 时 设置 了 query.debug 一 一 也 就 是 访问 了 /my form debug.html?debug= 
true 一 一 那么 将 在 控制 台中 看 到 下 面 的 输出 : 
MyFormController loaded +0ms 


MyFormController saving form... +4s 
MyFormController save form success +22ms 


首先 每 条 输出 都 有 命名 空间 , 然后 是 日 志 消息 , 再 后 是 所 消耗 的 时 间 ( 因 为 之 前 的 日 志 
消息 跨越 了 所 有 的 命名 空间 )。 最 后 一 个 部 分 在 寻找 缓慢 的 HITP 请 求 时 特别 有 用 。 另 外 ， 
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消耗 的 时 间 输 出 可 以 帮助 识别 哪个 Sapply 调用 是 缓慢 的 ， 这 是 调试 AngularJS 性 能 问题 的 
第 一 步 。 

回顾 一 下 ，$http 服务 将 成 功 和 失败 处 理 器 封装 在 对 scope.$apply 函数 的 调用 中 。 该 函 
数 将 执行 一 个 潜在 的 缓慢 循环 ， 用 于 计算 所 有 已 注册 的 表达 式 ， 看 它们 是 否 发 生 了 变化 。 
一 个 常见 的 问题 是 : 指定 的 Sapply 调用 将 使 用 多 长 时 间 。 因 为 Sapply 调用 可 以 通过 阻塞 的 
方式 在 $http 成 功 处 理 器 之 后 执行 ， 所 以 可 以 在 setTimeout 函数 中 封装 一 个 调试 ， 从 而 使 它 
可 以 在 $apply 完成 之 后 立即 执行 : 


$scope.saveForm = function() { 
$scope.saving = true; 
dl('saving form...'); 
$http. 
put('/api/submit', $scope.userData). 
success (function(data) { 
d('save form success'); 
$scope.saving = false; 
$scope.success = true; 
setTimeout (function() { 
dl('save form $scope.$apply() done'); 
}, 0); 


error (function (err) { 
dl('save form failed: ' + err); 
$scope.saving = false; 
$scope.error = err; 
}) 7 
] 7 


控制 台 的 输出 应 该 如 下 所 示 : 


MyFormController saving form... +5s 
MyFormController save form success +29ms 
MyFormController save form $scope.$apply() done +2ms 


关于 调试 另外 一 个 值得 一 提 的 重要 细节 是 : 可 以 启用 或 者 禁用 单个 调试 记录 器 。 
debug.disable(namespace) 函 数 将 绑 定 一 个 空白 操作 到 调试 记录 器 。 记 住 ， 需 要 在 实例 化 调 
试 记录 器 之 前 调用 该 函数 ， 因 为 调试 记录 器 是 否 真 正 地 输出 内 容 是 在 它 实例 化 时 决定 的 。 

总 之 ，debug 模块 提供 了 一 个 简单 的 、 优 雅 的 功能 集 ， 用 于 查看 应 用 正在 做 什么 。 尽 
管 它 不 如 完整 的 调试 器 那么 强大 ， 但 是 通过 它 可 以 在 缺少 复杂 开发 者 工具 的 旧版 本 浏览 
中 调试 问题 。 但 是 在 像 Google Chrome 这 样 的 浏览 器 中 ， 可 以 访问 一 些 极其 强大 的 开发 者 
工具 ， 通 过 它们 可 以 更 轻松 地 进行 调试 。 
9.4.2 ”使 用 Chrome DevTools 进行 调试 


Google Chrome 的 开发 者 工具 提供 了 一 个 丰富 的 工具 集 ， 用 于 调试 和 分 析 代 码 正 在 完 
成 的 事情 。 除了 能 够 检测 DOM 的 状态 和 读 取 控 制 台 输出 ，Chrome 还 允许 执行 更 复杂 的 调 
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试 操作 ， 例 如 断 点 。 
1. 启动 开发 者 工具 


如 果 尚 未 安装 Google Chrome， 那 么 可 从 https:// google.com/chrome 安装 它 。 即 使 你 更 
喜欢 使 用 另 一 个 浏览 器 用 于 日 常 浏览 ，Chrome 内 置 的 开发 者 工具 也 是 开发 AngularJS 应 用 
不 可 缺少 的 一 部 分 。 一 旦 启动 了 Chrome， 就 可 以 访问 开发 者 工具 (或 者 简称 DevTools) 了 ， 
方法 有 4 种 : 

(1) 打开 Chrome 菜单 ， 然 后 单 击 Tools | Developer Tools。 

(2) 在 页 面 上 的 任意 位 置 右 击 ， 选 择 Inspect Element。 在 DevTools 中 打开 Elements 选 
项 卡 ， 通 过 这 种 方式 可 以 检测 DOM 的 当前 状态 。 

(3) 使 用 CtrltShifttI 快 捷 键 (在 Mac 中 使 用 Cmd+OpttD 打 开 DevTools Elements 选项 卡 。 

(4) 使 用 Ctl+ShifttJ 快 捷 键 (在 Mac 中 使 用 Cmd+OpttJ) 打 开 DevTools Console 选 项 卡 ， 
显示 控制 台 日 志 输出 。 

一 旦 启动 了 DevTools， 屏 幕 底 部 将 出 现 一 个 含有 9 个 选项 卡 的 面板 : Elements、 
Resources、Network、Sources、Timeline、Profi les、Storage、Audits 和 Console。 每 个 选项 
卡 都 有 实现 了 一 组 不 同 任务 的 不 同 功 能 。 


2. 检测 DOM 的 状态 
DevTools 中 最 常见 的 任务 就 是 检测 DOM 的 当前 状态 ， 例 如 div 元 素 使 用 了 什么 类 。 


ET 


例如 ， 在 Chrome 中 访问 /my_form.debug.html 页 面 时 ， 右 击 页 面 顶部 的 hl 元 素 ， 并 单 各 
Inspect Element。 你 应 该 看 到 如 图 9-4 所 示 的 窗口 。 


图 9-4 


通过 右 侧 的 Styles 面板 ， 可 以 查看 和 编辑 与 所 选择 元 素 相关 的 样式 。 尝 试 在 Styles 面 
板 中 单 击 element.style 文本 ， 并 输入 color:red。 元 素 hl 将 变 红 。 当 把 鼠标 悬 停 在 文本 上 时 ， 
应 该 看 到 紧 挨 着 color:red 有 一 个 复 选 框 。 如 果 取 消 选中 复 选 框 的 话 ， 元 素 hl 将 重新 变 成 
黑色 。 

3. 使 用 控制 台 选 项 卡 

Console 选项 卡 将 显示 像 console.log 和 console.profile 函数 的 输出 。 不 过 ， 除 了 这 个 简 
单 的 任务 ，Console 选项 卡 还 显示 了 一 个 读 取 - 评 估 - 打 印 循环 ， 通 常 缩写 为 REPL， 这 将 允 
许 我 们 针对 页 面 执行 任意 的 JavaScript 代码 。 例 如 ， 打 开 Console 选项 卡 ， 单 击 >， 并 输入 
alert(window.location.href)。 此 时 应 该 看 到 一 个 显示 当前 URL 的 警告 窗口 。 
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记 住 ，Console 选项 卡 的 REPL 将 针对 全 局 作用 域 执行 JavaScript 代码 ， 而 不 是 任何 一 
个 AngularJS 作用 域 。 如 果 希 望 执行 在 AngularJS 控制 器 中 定义 的 函数 , 就 需要 通过 将 它们 
附加 到 $window 对 象 的 方式 公开 它们 。 例 如 ， 如 果 打 开本 章 样 例 代码 中 的 my_form html 
页 面 , 将 看 到 该 页 面 把 ShttpBackend 附加 到 了 全 局 window 对 象 中 。 可 以 在 Console 选项 卡 
REPL 中 输入 下 面 的 代码 ， 手 动 配置 页 面 的 ShttpBackend: 


$httpBackend.when('PUT', '/api/submit').respond(200, {1}); 
4. 在 源 选项 卡 中 设置 断 点 


打开 my_form html 页 面 并 访问 DevTools 中 的 Sources 选项 卡 .使 用 Ctrl+O (在 Mac 中 
使 用 Cmd+O) 快 捷 键 在 Sources 选项 卡 中 打开 文件 my_form controllerjs。 现 在 你 应 该 在 
Sources 选项 卡 中 看 到 my form controllerjs 的 源 代码 。 右 击 第 6 行 $scope.saving = true; 代 码 
的 左 侧 。 在 下 拉 菜 单 中 单 击 Set Breakpoint 选项 。 

现在 输入 名 称 和 电子 邮件 地 址 ， 并 单 击 Save 按钮 。 你 应 该 看 到 屏幕 中 弹出 了 一 个 
Paused in Debugger 层 ， 并 在 源 代码 的 右 侧 显示 出 一 个 新 的 面板 ， 如 图 9-5 所 示 。 


图 9-5 


右 侧 的 面板 中 包含 了 当前 作用 域 中 JavaScript 变量 的 当前 状态 。 尤 其 是 ， 在 Scope 
Variables | Closure 标题 中 , 可 以 看 到 $scope 变量 的 当前 状态 , 包括 userData 值 , 参见 图 9-6。 


图 9-6 


5. 调试 网 络 性 能 


Network 选项 卡 提供 了 一 个 简单 的 服务 器 交互 时 间 轴 : 什么 请 求 被 发 送 到 了 服务 器 ， 
以 及 花费 了 多 长 时 间 。 在 my_form html 页 面 上 打开 Network 选项 卡 ， 应 该 看 到 如 图 9-7 所 
示 的 内 容 。 
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图 9-7 


Network 选项 卡 显 示 了 4 个 服务 器 请 求 : 一 个 用 于 访问 my_form html，3 个 用 于 访问 
JavaScript 文件 。 所 有 请 求 一 共 花 费 了 10 毫秒 ， 但 是 JavaScript 文件 的 请 求 将 以 并 行 的 方 
式 发 生 在 my form.html 文件 加 载 的 80 毫秒 后 。 右 侧 的 红线 和 蓝 线 表示 发 生 了 两 个 重要 的 
事件 : 红线 表示 何 时 激活 load 事件 一 也 就 是 所 有 页 面 资源 完全 被 加 载 时 。 蓝 线 表示 何 时 
激活 DOMContentLoaded 事件 一 一 也 就 是 当 HTML 文档 被 完全 加 载 和 解析 时 。 

Network 选项 卡 还 可 以 显示 来 自 服务 器 HTTP 响应 的 内 容 。 这 对 于 分 析 问 题 来 说 是 非 
常 有 用 的 : 通常 调试 AngularJS 问题 时 的 第 一 步 是 决定 服务 器 是 否 发 送 了 正确 的 响应 ， 这 
样 我 们 就 可 以 判断 出 问题 是 出 现在 客户 端 还 是 服务 器 端 。 尝 试 在 Name 列 中 单 击 my_form 
controllerjs 字符 串 。Network 选项 卡 现在 将 显示 出 HITP 请 求 和 HTTP 响应 的 一 个 详细 分 
析 ， 参 见 图 9-8。 


图 9-8 


这 个 面板 显示 AngularJS 为 localhost:8080/my form controllerjs 发 送 了 一 个 HTTP GET 
请 求 ， 并 在 响应 中 接收 了 一 个 HTTP 304(Not Modified) 状 态 。Response 选项 卡 中 显示 出 了 
响应 的 实际 内 容 。 


9.5 小 结 


本 章 介 绍 了 如 何 设置 复杂 的 浏览 器 测试 工具 和 调试 客户 端 JavaScript。AngularJS 被 设 
计 为 易于 测试 ， 并 提供 了 许多 工具 用 于 帮助 保证 ， 在 问题 出 现在 生产 环境 之 前 ， 应 用 的 行 
为 是 正确 的 。 尽 管 AngularJS 在 构建 时 已 经 强调 了 基本 的 单元 测试 ， 但 是 通过 像 Karma、 
ng-scenario 和 protractor 这 样 的 工具 ， 可 通过 在 线 浏览 器 对 应 用 进行 端 到 端 测 试 ， 无 论 是 
针对 本 地 还 是 针对 Sauce 的 浏览 器 提供 服务 。 如 果 需 要 调试 一 个 问题 ， 除 了 优雅 的 开源 
JavaScript 工具 ， 还 可 以 使 用 Chrome 复杂 的 DevTools, 它 可 以 帮助 我 们 发 现代 码 出 现 中 出 
现 了 什么 问题 。 
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继续 前 行 


本 章 内 容 : 
使 用 流行 的 框架 扩展 AngularJS 
使 用 Angular-UI Bootstrap 模块 
使 用 Ionic 构建 混合 移动 应 用 
使 用 MomentJS 操作 日 期 
使 用 MongooseJS 初始 化 和 验证 数据 
使 用 AngularJS 和 ECMAScript 6(Harmony) 


本 章 的 样 例 代码 下 载 : 
可 以 在 http://www.wrox.com/go/proangularjs 页 面 的 Download Code 选项 卡 找到 本 章 的 
wrox.com 代码 下 载 文件 。 


如 果 已 经 完成 了 本 书 的 学 习 ， 那 么 恭喜 你 ! 之 前 的 章节 中 包含 了 所 有 使 用 AngularJS 
核心 构建 和 测试 复杂 应 用 所 需 的 信息 。 不 过 ， 因 为 AngularJS 是 开源 的 ， 所 以 有 许多 表达 
式 、 插 件 和 框架 可 以 为 AngularJS 增加 强大 的 功能 。 而 且 ，JavaScript 自身 有 着 极其 活跃 的 
开源 社区 ， 有 众多 模块 可 以 使 编写 AngularJS 应 用 变 得 更 加 简单 。 在 本 章 ， 将 扩展 核心 
AngularJS, 并 学 习 如 何 使 用 两 个 流行 的 AngularJS 扩展 (Angular-UI 的 Bootstrap 项 目 和 Ionic 
框架 )， 以 及 如 何在 AngularJS 中 集成 两 个 流行 的 JavaScript 模块 (Moment 和 Mongoose)。 

另外 ，JavaScript 自身 是 一 门 快速 发 展 的 语言 。ECMAScript 是 JavaScript 幕后 的 语言 
标准 ， 它 最 近 的 迭代 ECMAScript 5 (ES5) 增 加 了 一 些 令 人 激动 的 功能 。 另 外 ， 有 几 个 浏览 
器 已 经 增加 了 对 ECMAScript 6 (ES6) 标 准 中 建议 的 一 些 特 性 的 支持 。 稍 后 将 学 习 如 何在 
AngularJS 中 集成 ES5 访问 器 ， 以 及 如 何在 $http 服务 中 使 用 ES6 的 yield 关键 字 。 
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10.1 使 用 Angular-Ul Bootstrap 


Bootstrap (http://www.getbootstrap.com ) 是 一 个 流行 的 开源 层 革 样式 表 (CSS) 框 架 ， 由 
Twitter 开发 ， 它 还 附带 了 一 个 JavaScript 库 。Bootstrap 提供 了 各 种 功能 ， 包 括 灵活 的 12 
列 网 格 布局 , 该 布局 可 以 优雅 地 适应 小 屏幕 (也 就 是 移动 设备 )。 它 的 JavaScript 组 件 中 包括 
模 态 框 、 下 拉 列 表 和 提示 ， 但 是 Bootstrap 的 JavaScript 倾向 于 与 jQuery 样式 的 JavaScript 
一 起 工作 。 尽 管 AngularJS 可 以 执行 jQuery 代码 ， 但 是 无 法 使 用 像 数 据 绑 定 和 指令 这 样 的 
功能 。 幸 亏 ，AngularUI 团队 创建 它 自己 的 模块 AngularUI Bootstrap， 该 模块 包含 了 将 
Bootstrap 模块 集成 到 AngularJS 数据 绑 定 中 的 指令 和 服务 。 

为 方便 起 见 ， 本 章 的 样 例 代 码 包 含 了 使 用 Angular-UI Bootstrap 所 需 的 4 个 文件 (除了 
AngularJS 1.2.16 之 外 )。 文 件 bootstrap.css 和 bootstrapjs 包含 了 Twitter Bootstrap 未 压缩 的 
3.2.0 版 本 。Bootstrap 的 JavaScript 依赖 于 jQuery， 所 以 其 中 还 包含 了 jQuery 1.11.2。 另 外 ， 
ui-bootstrap-tpls-0.11.2js 文件 包含 了 AngularUI Bootstrap 0.11.2 版 本 。 


注意 : 

从 技术 角度 看 ，Angular-UI Bootstrap 不 需要 Bootstrap 的 JavaScript 文件 bootstrap js。 
Angular-UI Bootstrap 基于 Bootstrap 的 CSS 实现 了 自己 的 组 件 。 不 过 ， 实 际 上 同时 拥有 这 
两 个 文件 是 非常 有 帮助 的 。 因 为 在 某 些 不 需要 使 用 数据 绑 定 的 用 例 中 ， 使 用 AngularJS 是 
一 种 浪费 ， 而 且 也 不 太 方便 (与 普通 的 Bootstrap JavaScript 相 比 )。 例如， 如 果 需 要 一 个 简单 
的 下 拉 列 表 ， 它 的 状态 并 未 绑 定 到 JavaScript 变量 ， 那 么 使 用 Angular-UI Bootstrap 只 会 为 
$digest 循环 增加 额外 的 复杂 度 和 开销 。 


10.1.1 ， 模 态 框 


Angular-UI Bootstrap 最 常见 的 用 例 之 一 就 是 创建 支持 AngularJS 的 模 态 框 。 通 常 ， 内 
置 的 JavaScript alert0 和 confirm() 对 话 框 是 不 和 谐 的 ， 看 起 来 也 不 专业 。Bootstrap 的 模 态 框 
更 加 优雅 和 可 自 定义 。 在 本 节 ， 将 学 习 如 何 使 用 Angular-UI Bootstrap $modal 服务 为 两 个 
用 例 创建 可 自 定 义 模 态 框 : 一 个 向 用 户 确认 操作 的 简单 对 话 框 ， 一 个 向 用 户 索要 输入 的 对 
话 框 。 本 节 的 样 例 代码 被 包含 在 bootstrap_modal.html 文件 中 。 

$modal 服务 有 一 个 函数 open(options), 它 将 基于 options 对 象 指定 的 配置 打开 一 个 模 态 
框 。Options 对 象 有 许多 可 调整 的 选项 ; 不 过 ， 有 一 些 在 几乎 所 有 用 例 中 都 是 必需 的 。 毫 不 
奇怪 的 是 , $modal 服务 允许 我 们 指定 template 或 者 templateURL 选项 ,这 将 告诉 Angular-UI 
Bootstrap 在 模 态 框 中 泻 染 哪个 模板 ( 记 住 模板 是 包含 AngularJS 注入 的 HIML 的 字符 串 )。 
另外 ，$modal 服务 允许 指定 scope 选项 ， 这 将 定义 Smodal 模板 作用 域 的 父 作 用 域 。 注 意 ， 
$modal 服务 总 是 为 模板 创建 一 个 新 的 作用 域 。 默 认 情况 下 ， 该 作用 域 的 父亲 是 页 面 的 根 作 
用 域 ， 由 $rootScope 服务 表示 。 不 过 ， 通 常 我 们 希望 让 $modal 服务 创建 的 作用 域 使 用 当前 
控制 器 的 作用 域 作为 父 作 用 域 。 这 将 使 模 态 框 可 以 与 控制 器 中 定义 的 方法 进行 无 颖 交互 。 

现在 我 们 已 经 了 解 了 可 用 于 配置 Smodal 服务 的 基本 选项 , 接 下 来 是 一 个 简单 模 态 框 的 
实现 ， 它 将 向 用 户 确认 一 个 操作 : 
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// 为 了 使 用 Angular-UI Bootstrap， 需 要 在 'ui .bootstrap' 模 块 中 添加 一 个 依赖 
Var app = angular.module('myApp', ['ui.bootstrap']); 


var confirmationTemplate = 
mxh3>w 4 
"mn Are you sure you want to learn about" + 
" Angular-UIl Bootstrap modals?" + 
WA: KP 
she>y™ :4 
"<button class='btn' type='submit' ng-click='confirm(true)'>" + 
YY 
“ejbuttons” 4 
"<button class='btn' type='submit' ng-click='confirm(false)'>" + 
" No"+ 
"</pbutton>"; 


app.controller('MyController', function($scope, $modal) { 
$scope.confirmed; 
$scope.modal; 
$scope.confirm = function(confirmed) { 
$scope.confirmed = confirmed; 
$scope.modal .close(); 
] 7 


$scope.showConfirmation = function() { 
$scope.modal = $modal. 
open({ 
scope: $scope, 
template: confirmationTemplate 
了 


之 前 的 控制 器 通过 控制 器 的 作用 域 公 开 了 两 个 函数 : showConfirmation() 和 confirm()， 
前 者 将 使 用 $modal 服务 打开 一 个 模 态 框 ， 它 的 模板 是 confirmationTemplate 字符 串 ， 后 者 
将 被 该 模板 所 调用 ， 从 而 返回 结果 并 关闭 模 态 框 。 再 次 ，confirmationTemplate 模板 将 在 一 
个 父 作 用 域 为 控制 器 $scope 的 作用 域 中 执行 。 下 面 是 对 应 于 该 控制 器 的 HTML: 


<div ng-controller="MyController"> 
<button type="submit" 
class="btn" 
ng-click="showConfirmation()"> 
Show Confirmation Modal 


</button> 

<h2 ng-if="confirmed === true"> 
Confirmed 

</h2> 

<h2 ng-if="confirmed === false"> 
Denied 
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</h2> 
</div> 


通常 ， 需 要 显 式 地 设置 模 态 框 的 scope 选项 (而 不 是 使 用 默认 的 SrootScope)， 将 模 态 框 
模板 的 访问 赋 给 控制 器 的 $scope 中 定义 的 函数 。 之 前 的 代码 依赖 于 模 态 框 模板 可 以 调用 
confirm() 函 数 ( 它 被 附加 到 了 控制 器 的 $scope 中 ) 这 个 事实 ， 从 而 可 以 将 用 户 的 选择 发 送 给 
控制 器 。 另 外 ， 因 为 Smodal 服务 将 创建 自己 的 作用 域 ， 所 以 可 以 修改 模 态 框 模板 中 的 变量 
和 函数 ， 但 是 无 法 修改 控制 器 的 $scope。 而 且 ， 可 以 在 Smodal.open() 方 法 中 使 用 controller 
选项 , 将 一 个 控制 器 附加 到 模 态 框 中 。 通 过 controller 选项 ,可 以 编写 拥有 自己 内 部 状态 的 
复杂 模块 。 例 如 ， 下 面 是 让 用 户 从 下 拉 列 表 中 选择 最 喜爱 章节 的 模 态 框 的 实现 : 


$scope.favoriteChapter; 
$scope.showSelectModal = function() { 
$scope.modal = $modal. 
open ({ 
scope: $scope, 
template: selectModalTemplate, 
controller: 'SelectModalController' 
}) 7 
有 


$scope.setFavoriteChapter = function (chapter) { 
$scope.favoriteChapter = chapter; 
I 


注意 这 个 模 态 框 将 使 用 刚刚 学 习 的 controller 选项 。 下 面 是 之 前 提 到 的 
SelectModalController 的 实现 : 


app.controller('SelectModalController', 
function($scope, $modalInstance) { 
$scope.options = []; 
$scope.selectedOoption; 
for (var i = 1; i <= 10; ++i) { 
$scope.options.push('Chapter ' + i); 
} 


$scope.select = function() { 
$scope.setFavoriteChapter ($scope.selectedOption); 
$modalInstance.close(); 
}; 
1); 


注意 ，SelectModalController 控制 器 将 使 用 一 个 通过 依赖 注入 传递 进来 的 本 地 对 象 
$modalInstance。 记 住 ， 本 地 对 象 是 一 个 在 指定 环境 中 注册 到 依赖 注入 器 的 额外 对 象 (本 地 
对 象 最 常见 的 用 例 是 $scope)。 与 $scope 非常 相像 ， 不 可 以 注册 依赖 于 $modalInstance 的 服 
务 。. 如 果 尝 试 在 ngController 指 令 或 者 Smodal 调 用 之 外 使 用 依赖 于 $modalInstance 的 控制 器 ， 
AngularJS 将 抛 出 一 个 错误 。 例如， 下 面 的 HTML 将 引起 一 个 “Unknown provider” 错 误 : 
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<div ng-controller="SelectModalController"></div> 


$modalInstance 本 地 对 象 将 公开 一 个 方便 的 应 用 编程 接口 (APD， 用 于 操作 模 态 框 。 在 
SelectModalController 中 , 将 使 用 它 的 close0 函 数 在 用 户 选 择 了 最 喜爱 的 章节 之 后 关闭 模 态 
框 。 还 有 一 个 dismiss0) 函 数 ， 它 的 行为 几乎 与 close0 函 数 是 一 致 的 。 唯 一 的 区 别 在 于 : 从 
语义 上 讲 ， 调 用 dismiss() 将 被 翻译 为 : 模 态 框 将 被 关闭 ， 无 须 用 户 执行 必要 的 操作 。 尤 其 
是 ，$modalInstance 还 有 一 个 result 属性 ， 这 是 一 个 约定 ， 它 将 在 模 态 框 关闭 时 履行 ， 在 模 
态 框 被 取消 时 拒绝 ( 记 住 ， 约 定好 似 一 个 对 象 ， 它 基于 异步 请 求 提供 了 语法 糖 )。 不 过 ， 在 
该 样 例 中 不 会 使 用 约定 ,所 以 对 于 SelectModalController 的 目的 来 说 ,close() 函 数 和 dismiss() 
函数 是 可 以 相互 交换 的 。 

SelectModalController 还 有 一 个 值得 一 提 的 细节 是 : 它 可 以 调用 setFavoriteChapter() 函 
数 ， 而 该 函数 实际 上 被 定义 在 它 的 父 作用 域 中 。 可 以 回顾 一 下 第 4 章 “ 数 据 绑 定 ”的 内 容 ， 
作用 域 可 以 从 父 作 用 域 继承 ， 因 此 ， 可 以 调用 MyController 作用 域 的 祖先 作用 域 中 的 
setFavoriteChapter() 函 数 。 这 个 作用 域 间 的 通信 正 是 为 什么 通常 我 们 在 调用 $modal.openO 时 
指定 scope 选项 的 原因 。 如 果 不 这 样 做 ， 模 态 框 的 模板 和 控制 器 就 无 法 访问 MyController 
作用 域 中 定义 的 任何 属性 ， 模 态 框 也 就 无 法 有 效 地 与 控制 器 进行 通信 。 

现在 我 们 已 经 研究 了 模 态 框 控制 器 的 特点 ， 接 下 来 将 在 模 态 框 的 模板 中 使 用 该 控制 器 
的 函数 。 该 模 态 框 的 模板 selectModalTemplate 如 下 所 示 : 


var selectModalTemplate = 
"<h2>What's your favorite chapter?</h2>" + 
"<select ng-model='selectedOption'" + 
om ng-options='x for x in options'>" + 
"</select>" + 
1 
"<button class='btn' ng-click='select()'>" + 
" Submit" + 
"</button>"; 


selectModalTemplate 模板 只 能 直接 与 SelectModalController 中 定义 的 属性 交互 一 一 也 就 
是 options , selectedOption 和 select() 函 数 。 通 常 ， 为 了 最 大 化 可 重用 性 ,我 们 希望 最 小 化 模 
态 框 对 父 作用 域 的 依赖 。 实 际 上 ， 通 常 我 们 只 在 单个 控制 器 中 使 用 指定 的 模 态 框 ， 但 是 你 
可 能 会 让 多 个 控制 器 使 用 含有 相同 模板 、 相 同 控 制 器 或 者 同时 含有 两 者 的 模 态 框 。 不 过 ， 
我 们 更 希望 重用 模板 ， 而 不 是 控制 器 ， 因 为 AngularJS 没有 模板 继承 的 概念 。 因 此 ， 为 了 
可 重用 性 ， 保 证 模 态 框 模板 不 与 父 作 用 域 进行 交互 是 一 个 好 主意 。 
10.1.2 日 期 选择 器 

AngularJS 核心 缺少 的 一 个 常见 用 例 是 : 让 用 户 选择 一 个 日 期 。AngularJS 确实 可 以 与 
HIML5 “日 期 ”输入 字段 (类 似 于 “文本 ”输入 字段 ) 很 好 地 进行 交互 ， 但 是 HIML5 元 素 
的 浏览 器 支持 非常 糟糕 。 实 际 上 ， 到 2014 年 时 ，Internet Explorer、Firefox 或 者 Safari 的 所 
有 版 本 都 不 支持 HIML5“ 日 期 ”输入 字段 。 幸 亏 ，Angular-UI Bootstrap 有 一 个 简洁 并 且 
简单 的 datepicker 指令 ， 可 以 在 应 用 中 使 用 。 本 节 的 样 例 代 码 在 bootstrap_datepicker.html 
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文件 中 。 假 设 控制 器 的 代码 如 下 所 示 : 


app.controller ('MyController', function($scope) { 
$scope.date = new Date(); 
7); 


插入 一 个 允许 用 户 选择 日 期 的 Angular-UI Bootstrap datepicker 指令 只 需要 一 行 代码 : 
<datepicker ng-model="date"></datepicker> 


不 过 ， 默 认 datepicker 指 令 将 显示 一 个 大 型 的 日 历 ， 这 无 法 很 好 地 向 用 户 表达 当前 选择 
的 日 期 是 什么 ( 它 强调 了 当前 被 选择 的 日 期 , 但 是 只 有 当 处 于 正确 的 月 份 时 才能 很 好 地 工作 )。 
如 果 希 望 模拟 HTML5 <input type="date"> 元 素 一 一 也 就 是 在 文本 输入 中 显示 当前 所 选择 的 
期 , 并 且 只 有 在 用 户 单 击 输 入 字段 时 才 显示 日 历 一 一 那么 可 以 使 用 相关 的 datepicker-popu 
指令 。 当 用 户 单 击 输入 字段 时 ， 通 过 该 指令 可 以 在 一 个 弹出 框 中 显示 出 一 个 与 datepicker 指 
令 对 等 的 日 历 : 


<input type="text" 
class="form-control" 
datepicker-popup="yyyYyY/MM/dd" 
ng-disabled="isOpen" 
ng-model="date" 
is-open="isOpen" 
ng-click="isOpen = true" /> 
指令 datepicker-popup 将 接受 一 个 格式 字符 串 。 该 字符 串 代 表 了 被 传 入 到 AngularJs 日 
期 过 滤器 中 的 格式 ， 用 于 决定 如 何在 输入 字段 中 泻 染 日 期 。 在 本 样 例 中 ， 对 于 日 期 June 1, 
2011， 在 输入 字段 中 它 将 被 泻 染 为 “2011/06/01”。 
注意 ，datepicker 弹出 框 的 打开 /关闭 状态 是 由 isOpen 变量 所 控制 的 。 无 论 何 时 用 户 单 
击 输入 字段 ，isOpen 变量 都 将 被 设置 为 tue。 当 datepicker 弹出 框 应 该 被 关闭 时 ， 它 有 一 
些 合理 的 默认 规则 ， 例 如 当 用 户 单 击 在 不 是 弹出 框 的 位 置 上 时 或 者 当 用 户 真正 地 选择 了 一 
个 日 期 时 。 在 之 前 的 样 例 中 ， 当 datepicker 弹出 框 打 开 时 ， 输 入 字段 被 设置 为 “禁用 ”。 这 
是 一 个 用 户 体验 (UX) 决 定 ， 用 于 保证 终端 用 户 无 法 在 输入 字段 中 输入 内 容 。 默 认 情 况 下 ， 
当 datepicker 弹出 框 打 开 时 ， 是 允许 用 户 在 输入 字段 中 输入 内 容 的 ， 而 这 将 导致 不 可 预测 
的 行为 。 


10.1.3 ”时 间 选 择 器 


指令 datepicker 只 允许 修改 日 期 对 datepicker 指令 非常 自然 的 改进 是 创建 一 个 让 用 户 
以 修改 时 间 的 指令 , 这 样 就 可 以 询问 用 户 特定 的 事件 在 什么 时 候 发 生 。 幸亏 , Angular-UI 
ootstrap 有 一 个 对 应 的 timepicker 指令 ， 它 将 以 类 似 于 datepicker 指令 的 方式 进行 操作 。 
以 同时 使 用 这 两 个 指令 : 

<div ng-controller="MyDateController"> 


<h2>Date</h2> 
<div style="width: 300px"> 


到 对 乙 
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<input type="text" 
class="form-control™" 
datepicker-popup="yyyy/MM/dd" 
ng-disabled="isOpen™ 
ng-model="date" 
is-open="isopen" 
ng-click="isOpen = true" /> 
</div> 
<h2>Time</h2> 
<timepicker ng-model="date"> 
</timepicker> 
<hr> 
<h2> 
Currently Selected Date: {{date | date:'medium'}} 
</h2> 
</div> 


指令 timepicker 将 被 无 缝 地 绑 定 到 双向 数据 绑 定 中 ， 所 以 可 以 简单 地 指定 一 个 
ngModel， 并 让 指令 处 理 所 有 的 用 户 交互 。 指 令 timepicker 还 有 一 些 复杂 的 用 户 输入 机 制 。 
例如 ， 用 户 可 以 使 用 鼠标 滚轮 增加 或 者 减少 当前 的 小 时 和 分 钟 数 。 尽 管 鼠 标 滚轮 集成 通常 
是 正确 的 选择 ,但 是 可 以 使 用 mousewheel 特性 禁用 它 。 禁 用 鼠标 滚轮 集成 的 代码 如 下 所 示 : 


<timepicker ng-model="date" mousewheel="false"> 
</timepicker> 


10.1.4” 自 定义 模板 


在 使 用 datepicker 和 timepicker 时 , 你 可 能 已 经 注意 到 : 通过 所 提供 的 配置 选项 无 法 修 
改 指令 的 用 户 界面 。 也 就 是 说 , 我们 无 法 使 用 自己 的 模板 取代 默认 的 timepicker 指令 模板 。 
不 幸 的 是 ，AngularJS 模板 如 何 工作 存在 着 一 个 限制 一旦 AngularJS 获得 了 指令 模板 ， 就 
无 法 修改 它 (也 就 是 说 ，AngularJS 只 调用 指令 函数 一 次 )。 幸 亏 ，Angular-UI Bootstrap 将 多 
许 为 指 定 的 指令 覆 写 模板 ( 它 将 改写 该 指令 所 有 实例 的 模板 )。 在 本 节 ， 将 为 之 前 小 节 中 学 
习 的 timepicker 指令 构建 自己 的 模板 。 


注意 : 

你 可 能 好 奇 为 什么 Angular-UI Bootstrap JavaScript 文 件 被 命名 为 bootstrap-tpls-0.11.2.js。 
tpls 意 味 着 该 文件 包含 了 所 有 指令 的 模板 。Angular-UI Bootstrap 也 作为 bootstrap-0.11.2.js 进 
行 分 发 ， 该 文件 并 未 包含 模板 ， 因 此 需要 为 希望 使 用 的 所 有 指令 指定 自己 的 模板 。 通常， 
如 果 刚 刚 启动 一 个 新 的 项 目 , 那么 我 们 会 希望 使 用 Angular-UI Bootstrap 的 templates-included 
build( 也 就 是 bootstrap-tpls-0.11.2.js 文 件 )， 因 为 如 你 在 本 节 所 见 ， 可 以 轻松 地 改写 已 有 的 模 
板 。 如 果 项 目 中 并 未 使 用 任何 内 置 模板 ， 而 且 出 于 性 能 的 考虑 希望 缩减 文件 大 小 ， 那 么 可 
以 使 用 无 模板 版 本 (bootstrap-0.11.2.js 文 件 )。 


改写 内 置 Angular-UI Bootstrap 指令 模板 最 简单 的 方式 就 是 使 用 AngularJS 的 script 指 
令 (AngularJS 将 检测 页 面 的 script 标记 寻找 模板 )。 为 了 使 用 只 显示 一 些 文 本 的 简单 模板 蔡 
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换 timepicker 指令 模板 ， 请 使 用 下 面 的 代码 : 


<script id="template/timepicker/timepicker.html" 
type="text/ng-template"> 
<h2> 
==> I am a timepicker! 
</h2> 
</script> 


之 前 的 代码 将 告诉 AngularJS 的 模板 缓存 ， 不 要 为 template/timepicker/timepicker.html 
模板 发 送 HTTP 请 求 , 相反 ， 它 应 该 使 用 script 标记 的 内 容 。 如 果 希 望 了 解 关于 AngularJS 
模板 缓存 的 更 多 内 容 ， 第 6 章 “ 模 板 、 位 置 和 路 由 ”中 包含 了 详细 的 信息 。 不 过 出 于 本 节 
的 目的 ， 知 道 模板 缓存 按照 DD( 通 常 是 统一 资源 定位 符 或 者 URL) 存 储 模板 ,而 且 可 以 使 用 
<script type="text/ng-template"> 改 写 模 板 缓存 中 的 一 个 条 目 就 足够 了 。 指 令 timepicker 使 用 
的 是 template/timepicker/timepicker.html 模板 ， 所 以 可 以 使 用 script 标记 改写 它 。 

到 目前 为 止 ， 我 们 已 经 使 用 “Hello, world” 模 板 蔡 换 了 timepicker 指令 。 为 了 使 自 定 
义 模板 变 得 有 用 ， 需 要 检测 并 了 解 默 认 的 timepicker 指令 模板 是 如 何 工作 的 。 这 就 是 为 什 
么 通常 我 们 应 该 使 用 默认 的 Angular-UIBootstrap 模板 的 原因 。 为 了 编写 一 个 自 定义 指令 模 
板 ， 需 要 一 个 对 timepicker 指令 是 如 何 工作 的 有 更 详细 的 了 解 。 也 就 是 说 需要 知道 调用 什 
么 函数 ， 使 用 什么 作用 域 变量 绑 定 输入 字段 ， 从 而 可 以 编写 一 个 正常 运行 的 时 间 选 择 器 。 
许多 情况 下 , 这 是 不 必要 的 工作 。 不 过 ,timepicker 指令 是 一 个 常见 的 选择 ,默认 的 timepicker 
指令 UI 对 于 许多 应 用 来 说 都 是 很 糟糕 的 。 

下 面 是 wi-bootstrap-tpls-0.11.2.jjs 文件 中 timepicker 指令 默认 使 用 的 模板 ， 这 里 为 了 可 
读 性 对 它 进 行 了 格式 化 : 


<table> 
<tbody> 
<tr class="text-center"> 
<td> 
<a ng-click="incrementHours()" 
class="btn btn-link"> 
<span class="glyphicon glyphicon-chevron-up"> 
</span> 
</a> 
</td> 
<td>gnbsp;</td> 
<td> 
<a ng-click="incrementMinutes ()" 
class="btn btn-link"> 
<span class="glyphicon glyphicon-chevron-up"> 
</span> 
</a> 
</td> 
<td ng-show="showMeridian"></td> 
/Er 
<tr> 
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<td style="width:50px;" 
class="form-group™" 
ng-class="{f'has-error': invalidHours}"> 
<input type="text" 
ng-model="hours" 
ng-change="updateHours ()" 
class="form-control text-center" 
ng-mousewheel="incrementHours()" 
ng-readonly="readonlyInput" 
maxlength="2"> 
</td> 
<td>:</td> 
<td style="width:50px;" 
class="form-group" 
ng-class="{'has-error': invalidMinutes}"> 
<input type="text" 
ng-model="minutes" 
ng-change="updateMinutes ()" 
class="form-control text-center" 
ng-readonly="readonlyInput" 
maxlength="2"> 
</td> 
<td ng-show="showMeridian"> 
<button type="button" 
class="btn btn-default text-center" 
ng-click="toggleMeridian()"> 
{{meridian}} 
</button> 
</td> 
</ti> 
<tr class="text-center"> 
<td> 
<a ng-click="dqecrementHours () " 
class="btn btn-link"> 
<span class="glyphicon glyphicon-chevron-down"> 
</span> 
</a> 
</td> 
<td>gnbsp;</td> 
<td> 
<a ng-click="decrementMinutes()" 
class="btn btn-link"> 
<span class="glyphicon glyphicon-chevron-down"> 
</span> 
</a> 
</td> 
<td ng-show="showMeridian"> 
</td> 
</tr> 
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</tbody> 
</table> 


在 之 前 的 timepicker 指令 模板 中 ， 高 亮 部 分 显示 出 了 一 个 如 何 使 用 timepicker 指令 控 
制 器 的 “API” 操 作 当前 时 间 的 样 例 。 尤 其 是 ，timepicker 指令 控制 器 将 公开 一 个 hours 变 
量 和 一 个 minutes 变量 , 用 于 维护 timepicker 指令 的 内 部 状态 。 为 了 保证 这 些 变量 的 改动 被 
正确 地 进行 处 理 ， 在 改变 了 这 些 变量 之 后 可 以 调用 对 应 的 updateHours() 和 updateMinutes() 
函数 。 另 外 ， 还 有 辅助 函数 incrementHours()、incrementMinutes()、decrementHours() 和 
decrementMinutes(), 它们 将 调用 对 应 的 更 新 函数 ,在 了 解 了 内 部 timepicker 指令 控制 器 API 
的 相关 知识 之 后 ， 为 timepicker 指令 创建 一 个 基于 下 拉 列 表 的 模板 就 非常 简单 了 。 下 面 的 
模板 将 使 用 单个 下 拉 列 表 蔡 换 timepicker 的 默认 指令 模板 : 


<script id="template/timepicker/timepicker.html" 
type="text/ng-template"> 
<div ng-init="showMeridian = false;"> 
<select ng-model="myTime" 
ng-change="hours = myTime.hours; updateHours () ; 
minutes = myTime.minutes; updateMinutes ()" 
ng-options="t.value as t.display for t in 0 | 
timepickerOptions"> 
</select> 
</div> 
</script> 


之 前 的 代码 已 经 足够 了 , 但 是 在 该 代码 中 有 3 个 细微 的 细节 值得 深入 进行 研究 。 首先 ， 
ngInit 代码 将 保证 timepicker 指令 使 用 24 小 时 模式 。 否则 , 就 必须 同时 操作 小 时 和 AM/PM 
设置 ， 在 本 例 中 这 将 使 指令 变 得 更 加 复杂 。 其 次 ， 因 为 timepicker 指令 控制 器 内 部 的 一 个 
问题 ，ngChange 中 操作 的 顺序 是 非常 重要 的 : 在 改变 minutes 变量 之 前 ， 需 要 改变 hours 
变量 并 调用 updateHours(); 和 否则， 时 间 无 法 正确 地 进行 更 新 。 需 要 认真 地 检测 Angular-UI 
Bootstrap 的 代码 或 者 通过 试验 和 错误 才能 发 现 这 个 问题 。 

最 后 ， 你 可 能 已 经 注意 到 ngOptions 指令 的 timepickerOptions 过 滤器 。 因 为 timepicker 
指令 在 一 个 隔离 作用 域 中 ， 所 以 过 滤器 是 绕 过 作用 域 层次 将 数据 插入 到 timepicker 指令 作 
用 域 中 的 最 佳 方式 。 过 滤器 实现 如 下 所 示 : 


app.filter('timepickerOoptions', function() { 
Var timepickerOptions = []; 
for (var h = 0; h < 24; ++h) { 
timepickeroptions .push({ 
isplays 00 
Value: { 
hours: h, 
minutes: 0 
} 
et 
timepickerOptions.push({ 
plays Dh 
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Value: { 
hours: h, 
minutes: 30 


3 


return function() { 
return timepickerOptions; 
} 
1); 

如 你 所 见 ， 无 论 传 入 的 参数 是 什么 ， 该 过 滤器 都 将 返回 一 个 静态 数组 。 这 样 做 的 目的 
是 为 了 绕 过 timepicker 指令 的 隔离 作用 域 ， 甚 至 不 用 将 变量 添加 到 根 作用 域 中 ， 就 可 以 在 
隔离 作用 域 中 访问 它 。 幸 亏 ， 过 滤器 提供 了 一 种 绕 过 作用 域 层次 的 方式 ， 不 必 直 接 修改 指 
令 的 控制 器 代码 。 

现在 我 们 已 经 学 习 了 如 何 使 用 Angular-UI Bootstrap 实现 自 定义 的 Bootstrap 组 件 ， 接 
下 来 要 研究 另 一 个 令 人 激动 的 AngularJS 扩展 。 


10.2 ”使 用 lonic 框架 开发 的 混合 移动 应 用 


你 可 能 已 经 听 说 过 Cordova 和 PhoneGap， 它 们 是 构建 “混合 ”移动 应 用 的 工具 一 一 也 
就 是 ， 使 用 运行 在 浏览 器 中 的 JavaScript 编写 应 用 ， 但 仍 可 以 通过 Android 和 iPhone 应 用 
商店 进行 分 发 。 如 果 需 要 使 用 一 种 语句 编写 一 个 应 用 并 将 它 发 布 到 多 个 应 用 商店 ， 而 不 是 
分 别 维护 一 个 使 用 Java 编写 的 Android 应 用 和 一 个 使 用 Objective-C 编写 的 iPhone 应 用 ， 
那么 这 些 工具 是 极其 有 用 的 。 不过, 与 移动 开发 者 经 常 使 用 的 复杂 集成 开发 环境 (IDE) 和 内 
置 的 UI 组 件 ( 为 Android 开发 使 用 的 Eclipse,， 为 iPhone 开发 使 用 的 Xcode) 相 比 ,它们 相对 
少见 。Ionic 框架 是 基于 Cordova 构建 的 ， 它 包含 了 一 个 复杂 的 命令 行 界面 (CLD， 用 于 管 
理应 用 开发 和 类 似 于 Bootstrap UI 的 优美 组 件 ， 以 及 最 重要 的 ， 管 理 与 AngularJS 的 集成 。 
通过 Ionic 框架 ， 可 以 使 用 本 书 学 过 的 概念 构建 移动 应 用 ， 然 后 通过 所 选择 的 应 用 商店 分 
发 它们 。 在 本 节 中 ， 将 编写 一 个 简单 的 Ionic 框架 应 用 ， 并 了 解 Ionic 框架 如 何 工作 的 一 个 
高 级 概览 。 


10.2.1 设置 Ionic、Cordova 和 Android SDK 


通过 NodeJS 包 管 理 器 npm 安装 Cordova 和 Ionic 是 最 简单 的 。 如 果 尚 未 安装 NodeJS， 
请 访问 http:/nodejs.org， 并 按照 所 选择 平台 对 应 的 指令 安装 NodeJS。 在 安装 了 npm 之 后 ， 
可 以 使 用 npm install cordova ionic -g 同时 安装 Cordova 和 Ionic。 注 意 需 要 将 Cordova 安装 
到 全 局 位 置 ，Ionic 要 求 Cordova 在 系统 PATH 上 。 
出 于 本 节 的 目的 ， 将 设置 Ionic 框架 构建 一 个 Android 应 用 。 因 为 Ionic 框架 依赖 于 目 
标 Android 和 iOS 模拟 器 , 所 以 需要 安装 Android SDK 或 者 iOS SDK 不 过 , 安装 iOS SDK 
是 一 个 麻烦 的 过 程 ， 它 要 求 注册 一 个 账户 将 并 了 解 无 数 的 法 律 条 文 。 另 外 ， 它 被 限制 为 只 
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能 在 OSX 中 使 用 。 开 始 使 用 Android SDK 是 一 个 比较 简单 的 过 程 ， 它 可 以 在 Windows、 
Linux 或 者 OSX 上 完成 。 如 果 已 经 选择 了 将 要 使 用 的 操作 系统 ,那么 在 Ubuntu 此 类 的 Linux 
上 设置 Android SDK 可 能 是 最 简单 的 。 请 访问 http:Wdeveloper android.comy/sdlkvuindex.html,， 
并 执行 对 应 平台 的 指令 。 另 外 ， 我 们 还 需要 安装 Java JDK (http://www.oracle.com/ 
technetwork/java/javase/downloads/index.html ) 和 Ant 构建 系统 (http://ant.apache.org )。 注 意 ， 
Android SDK 是 一 个 腔 肿 的 软件 ， 下 载 它 可 能 要 花费 很 长 时 间 。 

安装 了 Java、Ant 和 Android SDK 后 , 从 命令 行 中 运行 android 命令 , 启动 Android SDK 
Manager。 然 后 ， 选 中 安装 Android4.4.2(API Level 19) 的 复 选 框 ， 并 单 击 Install Packages 获 
得 一 个 Android 的 合理 版 本 。 接 下 来 ， 需 要 创建 Android Virtual Device 或 者 AVD。 为 了 使 
用 新 安装 的 Android 4.4.2 创建 AVD， 请 运行 android create avd -n android4 -t 1 -abi default/ 
armeabi-v7a。 

现在 我 们 已 经 设置 了 Android， 接 下 来 就 可 以 创建 第 一 个 Ionic 应 用 ， 并 在 Android 模 
拟 器 中 运行 它 了 : 


ionic start myApp tabs 

cd myApp 

ionic Platform add android 
ionic build android 

ionic emulate android 


这 些 命令 将 在 myApp 目录 中 创建 一 个 新 的 Ionic 应 用 ， 配 置 它 运行 在 Android 模拟 器 
上 ， 并 启动 一 个 Android 模拟 器 ， 从 而 使 我 们 看 到 实际 的 应 用 。 该 应 用 是 从 Ionic 的 “tabs” 
starter 应 用 创建 的 。 
10.2.2 在 lonic 应 用 中 使 用 AngularJS 

Ionic 非常 有 趣 ， 因 为 它 允 许 我 们 使 用 本 书 学 到 的 AngularJS 原则 编写 移动 应 用 。 如 果 
认真 查看 上 一 节 创建 的 myApp 目录 中 的 代码 ,将 发 现 一 些 基本 的 AngularJS 控制 器 和 服务 。 
文件 myApp/www/index.html 中 含有 上 一 节 中 看 到 的 Android 应 用 的 基本 超 文 本 标记 语言 
(HTML)。 下 面 的 JavaScript 文件 将 被 包含 在 该 页 面 中 : 


<!-- ionic/angularjs js --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 


<!-- cordova 脚本 (在 开发 过 程 中 将 会 产生 404) --> 


<script src="cordova.js"></script> 


<! 一 应 用 的 js --> 

<script src="js/app.js"></script> 

<script src="js/controllers.js"></script> 
<script src="js/services.js"></script> 


文件 ionicbundlejs 中 包含 了 核心 angularjs 以 及 各 种 模块 ,例如 angular-animate.js。 文 
件 js/appjjs 包含 了 模块 定义 和 客户 端 路 由 设置 。 文 件 js/controllers.js 和 js/services.jjs 包含 了 
对 应 于 客户 端 路 由 的 控制 器 和 服务 。 因 为 这 是 一 个 样 例 应 用 , 所 以 控制 器 和 服务 都 是 存根 ， 
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而 且 不 会 太 复杂 。 该 应 用 最 复杂 的 部 分 在 js/appjjs 文件 中 。 
你 可 能 已 经 注意 到 js/appjjs 文件 将 在 客户 端 路 由 中 使 用 Angular-UI Router 模块 ， 而 不 
是 neRoute 模块 。 下 面 是 定义 了 路 由 的 代码 : 


config(function($stateProvider，S$SurlRouterProvider) { 


// Ionic 将 使 用 AngularUI Router， 而 AngularUI Router 将 使 用 状态 的 概念 

// 在 网 址 https:// github.com/angular-ui/ui-router 中 可 以 了 解 更 多 相关 概念 
// 创建 应 用 可 能 处 于 的 各 种 状态 

// 每 个 状态 的 控制 器 都 可 以 在 controllers .js 中 找到 


$stateProvider 


// 为 tab 指令 创建 抽象 状态 
.State('tab', { 

urls 区 

abstract: true, 

templateUrl: "templates/tabs.html" 
讨 


// 每 个 tab 都 有 自己 的 导航 历史 栈 : 


.state('tab.dash', { 
url: '/dash', 
Views: { 
'tab-dash': { 
templateUrl: 'templates/tab-dash.html', 
controller: 'DashCtrl' 
} 
} 
}) 
Angular-UI Router 模块 实际 上 是 ngRoute 一 个 更 加 复杂 的 版 本 .不 过 Angular-UI Router 
不 使 用 “路 由 ”， 而 是 使 用 “状态 ”这 类 似 于 路 由 ， 但 它 允 许 我 们 处 理 更 加 复杂 的 导航 。 
例如 ， 在 myApp 标签 式 应 用 中 ， 如 果 在 friends 详细 视图 中 切换 到 dash 标签 页 ， 然 后 再 切 
换 回 friends 标签 页 ， 会 发 生 什么 事情 呢 ? 在 使 用 ngRoute 模块 时 ， 所 有 的 状态 都 将 在 改变 
路 由 时 销毁 ， 所 以 当 返 回 到 friends 标签 页 时 ， 将 看 到 friends 的 主 列表 ， 而 不 是 正在 查看 
的 某 个 fiends。 在 移动 应 用 中 ， 这 不 是 一 个 好 的 UX 决定 。Angular-UI Router 提供 了 一 个 
框架 ， 通 过 该 框架 可 以 根据 应 用 的 需求 ， 选 择 显示 朋友 的 主 列表 还 是 保留 用 户 正在 查看 的 
某 个 朋友 (myApp 标签 式 应 用 默认 将 保留 用 户 正在 查看 的 朋友 )。 不 过 ，AngularUI Router 
的 总 体 结构 与 ngRoute 模块 非常 类 似 : 将 URL 映射 到 模板 和 控制 器 对 。 
Ionic 框架 还 有 一 个 重要 的 细节 需要 记 住 : 所 有 S$http 请 求 都 是 跨 域 的 ， 因 为 Ionic 框架 
应 用 将 通过 启动 浏览 器 ， 并 使 用 file/ 将 自己 导航 至 HIML 内 容 的 方式 进行 操作 。 例 如 ， 
如 果 在 myApp 应 用 的 仪表 盘 上 记录 $windowlocation href 的 值 ， 那 么 看 到 的 将 是 file:// 
/android asset/www/index.html。 因 此 ， 需 要 保证 AngularJS 代码 中 发 出 的 所 有 $http 请 求 都 
含有 一 个 完全 限定 URL, 包括 域名 。 还 需要 保证 请 求 发 送 到 的 所 有 服务 器 都 被 设置 为 接受 
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跨 域 资源 共享 (CORS) 请 求 。CORS 请 求 来 自 不 同 域 的 HTTP 请求 。 


现在 你 
的 一 些 关 键 


已 经 了 解 了 为 Ionic 框 架 编写 AngularJS 和 为 标准 桌面 浏览 器 环境 编写 AngularJS 


区 别 ， 接 下 来 要 让 myApp 应 用 做 一 些 有 用 的 事情 。 尤 其 是 ， 采 用 第 7 章 使 用 的 


Google 股 票 价 格 报价 服务 ， 将 它 插入 到 仪表 盘 视 图 中 ， 从 而 使 我 们 的 应 用 可 以 显示 当前 
Google 股 票 的 价格 。 下 面 是 $googleStock 服 务 的 实现 : 


factory('$googlestock', function($http) { 
var BASE = 'http://query.yahooapis.com/v1l/public/yql' 


Var query = encodeURIComponent ('select * from yahoo.finance.quotes ' + 
"where Symbol in (\'GOOG\')'); 

Var url = BASE + '?' + 'q=' + query + '&format=json&diagnostics=true&' + 
'env=http://datatables.org/alltables.env'; 


Var service = {}; 
service.get = function() { 
$http.jsonp(url + '&callback=JSON CALLBACK'). 
success (function (data) { 


} 


if (data.query.count) { 
Var quotes = data.query.count > 1 ? 
data.query.results.quote : 
service.quotes = quotes; 
} 
js 


error (function(data) { 


} 
] 7 


console.1og(dqata) 7 
) 


service.get (); 
return service; 


1); 


可 将 该 服务 添加 到 myApp/www/js/services.js 文件 中 。 为 将 该 服务 插入 到 myApp 应 用 
中 ， 应 该 把 它 添加 到 myApp/www/js/controllers.js 文件 的 DashCtrl 中 : 


.controller('DashCtrl', function($scope, S$googlestock) { 
$scope.googlestock = $googlestock; 


} 


还 应 该 将 它 添加 到 真正 的 仪表 盘 模 板 中 ， 在 myApp/www/templates/tab-dash.html 中 : 


<ion-view title="Dashboard"> 


<ion 


-content class="padding"> 


<hl>Dash</h1l> 
<h3>Current Google Stock Price: {{googleStock.quotes[0] .Ask}}</h3> 
</ion-content> 


</ion-— 


View> 


第 10 章 继续 前 行 


现在 当 运 行 ionic emulate android 命 令 时 ， 应 该 在 仪表 盘 中 看 到 当前 Google 股 票 的 价格 。 
10.2.3 ”为 生产 使 用 Yeoman 工作 流 和 构建 

另外 值得 一 提 的 是 : 因为 Ionic 框架 应 用 是 使 用 前 端 技术 构建 的 ， 所 以 它们 的 开发 过 
程 可 以 从 本 书 之 前 描述 的 相同 工作 流 自 动 化 工具 中 受益 。 尤 其 是 , 通过 使 用 generator-ionic 
Yeoman 插件 ， 由 Yeoman 创建 的 工作 流 还 可 以 协助 Ionic 应 用 的 开发 和 生产 压缩 。 为 了 开 
始 使 用 Ionic Yeoman Generator， 请 在 命令 行 中 运行 下 面 的 命令 : 


npm install -g generator-ionic 

mkdir myApp && cd myApp 

yo lonic 

在 新 创建 的 目录 中 运行 yo ionic 命令 之 后 ， 将 看 到 一 组 类 似 的 提示 ， 如 前 第 1 章 “ 构 
建 简单 的 AngularJS 应 用 ”开始 搭建 StockDog 应 用 时 看 到 的 提示 一 样 。 不 过 ， 此 次 除了 从 
命令 行 中 选择 一 个 启动 模板 之 外 ， 还 可 以 选择 一 个 流行 Cordova 插件 的 列表 进行 安装 ， 用 
于 帮助 搭建 一 个 智能 的 应 用 基础 。Grunt 支持 由 Yeoman 生成 器 创建 的 这 个 工作 流 , 所 以 可 
以 通过 修改 关联 的 Gruntfilejs 文件 实现 任何 改动 ， 下 面 是 一 些 可 用 的 命令 : 

® grunt serve[:compress] 
grunt platform:add:<platform> 
grunt plugin:add:<plugin> 
grunt [emulatelrun]:<target> 
grunt compress 

® grunt build:<platform> 

其 中 一 些 命令 在 顶层 将 使 用 官方 的 ionic-cli， 所 以 使 用 generator-ionic 创建 的 项 目 可 以 
很 好 地 与 ionic 工具 进行 集成 。 运 行 grunt serve 将 为 本 地 开发 在 浏览 器 中 启动 应 用 , 而 grunt 
emulate:android 一 一 livereload 将 使 用 内 置 的 在 线 加 载 支持 在 模拟 器 中 启动 应 用 。 这 是 非常 
有 用 的 ， 因 为 测试 Cordova 插件 集成 的 唯一 方式 就 是 在 设备 中 运行 应 用 ， 但 是 不 断 地 为 简 
单 的 前 端 改 动 重新 构建 和 模拟 会 让 人 感到 极其 诅 丧 。 目 录 dist/ 被 用 于 构建 StockDog 的 压缩 
文件 , 该 生成 器 将 使 用 grunt compress 命令 把 应 用 编译 到 www/ 目 录 中 ， 意识 到 这 一 点 非常 
重要 。 因 为 Corvoda 将 从 该 位 置 读 取 文件 ， 并 将 AngularJS 应 用 打包 为 本 地 应 用 。 可 以 在 
https://github.com/diegonetto/generator-ionic 中 找到 Ionic Yeoman Generator 的 更 多 相关 信息 。 


图 标 、 启 动画 面 和 Cordova 挂钩 


使 用 Cordova 和 Ionic 的 一 个 常见 问题 是 设置 应 用 图 标 和 启动 画面 .要 想 正确 地 设置 与 
Cordova 一 起 工作 的 应 用 图 标 和 启动 画面 是 非常 麻烦 的 事情 ， 所 以 生成 器 都 包含 了 一 个 
Cordova after prepare 挂钩 ， 用 于 负责 将 合适 的 资源 文件 复制 到 平台 目标 的 正确 位 置 。 为 了 
开始 使 用 它 ， 首 先 必须 通过 grunt platform:add:android 添加 一 个 平台 。 添加 平台 后 ,打包 的 
icons_and” splashscreens.js 挂 钧 将 Cordova 生成 的 所 有 的 占 位 符 图 表 和 启动 画面 复制 到 项 目 
中 一 个 新 创建 的 顶级 目录 resources/ 中 。 简 单 地 使 用 自己 的 资源 替换 这 些 文件 (但 保持 相同 
的 文件 名 和 目录 结构 )， 让 挂钩 的 魔法 自动 将 它们 复制 到 每 个 Cordova 平台 的 合适 位 置 ， 所 
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以 不 需要 打 断 现 有 的 工作 流 。 为 了 学 习 关 于 挂 钓 的 更 多 内 容 , 请 查看 Ionic 框架 项 目 hooks/ 
目录 中 的 README.md 文件 。 

这 就 是 Ionic 框架 了 。Ionic 框架 是 一 个 很 深入 的 话题 , 本 节 只 提供 了 Ionic 框架 如 何 工 
作 的 一 个 简洁 的 高 级 概述 。 官 方 的 Ionic 框架 网 站 http://ionicframework.com 包含 了 更 复杂 
的 指南 和 文档 。 


10.3 ”集成 开源 JavaScript 和 AngularJS 


JavaScript 最 强大 的 特性 之 一 就 是 它 生 机 勃 勃 的 开源 社区 。NodeJS 包 管理 器 npm 目前 
实际 上 是 最 大 的 包 生 态 系统 ,到 2014 年 10 月 为 止 大概 包 含 了 10 万 个 包 。 这 只 是 JavaScript 
的 包 管 理 器 之 一 。 有 无 数 的 其 他 包 管 理 器 ， 例 如 NuGet 和 Bower， 以 及 一 些 可 以 通过 普通 
JavaScript 文件 格式 使 用 的 包 。 如 果 正 在 寻找 一 些 很 难 使 用 JavaScript 实现 的 东西 ， 那 么 通 
常会 有 开源 模块 可 以 解决 你 的 问题 。 在 本 节 ， 将 学 习 使 用 两 个 常见 的 包 与 AngularJS 进行 


10.3.1 使 用 Moment 操作 日 期 和 时 区 


你 可 能 已 经 注意 到 JavaScript 的 原生 Date 对 象 有 点 麻烦 ， 而 且 缺 少 其 他 语言 (例如 Python) 
所 含有 的 功能 。 确 实 ， 原 生 JavaScript 日 期 有 一 些 重 要 的 限制 : 浏览 器 兼容 性 糟糕 、 日 期 算 
法 有 限 ， 而 且 不 支持 时 区 。 默 认 情 况 下 ， 原 生 JavaScript 日 期 将 由 浏览 器 的 本 地 时 间 指 定 ， 
但 是 有 一 些 方便 的 方法 可 以 修改 通用 协调 时 间 (UTC) 格 式 的 日 期 。 尽 管 这 对 于 许多 用 例 来 
说 都 是 足够 的 ， 但 是 你 可 能 发 现 自己 需要 以 更 加 复杂 的 方式 操作 日 期 ， 包 括 以 不 同 的 时 
显示 日 期 .Moment(www.momentjs.com) 是 JavaScript 中 最 流行 的 开源 日 期 辅助 模块 Moment 
和 它 的 扩展 moment-timezone 有 一 些 极其 复杂 的 日 期 操作 功能 ， 这 对 于 编写 区 分 时 区 的 
AngularJS 应 用 是 不 可 缺少 的 。 

为 方便 起 见 , momentjs 和 moment-timezone.js 文件 已 经 被 包含 到 了 本 章 的 样 例 代码 中 。 
Moment 公开 了 一 个 函数 moment()， 用 于 实例 化 Moment 对 象 ， 通 常 被 称 为 “时 刻 ” 本 章 
样 例 代 码 中 的 moment_examples.html 文件 包含 了 一 些 在 AngularJS 之 外 使 用 Moment 操作 
期 的 常见 用 例 : 


x 


<script type="text/javascript" src="moment.js"> 
</script> 
<script type="text/javascript" src="moment-timezone.js"> 
</script> 
<script type="text/javascript"> 

// Moment 代表 了 当前 日 期 


moment () 7 


// Moment 也 可 将 JavaScript 日 期 作为 参数 


moment (new Date () ) 


// 或 者 使 用 UNIX 时 间 戳 
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moment ( (new Date () ) .getTime()); 


// GMT2011 年 6 月 1 日 午夜 使 用 浏览 器 的 时 区 
moment ('2011-06-01T00:00:00.0002'); 


// GMT2011 年 6 月 1 日 午夜 ,使 用 UTC 格式 
moment ('2011-06-01T00:00:00.0002') .utc(); 


// 格式 : 表示 使 用 了 浏览 器 时 区 的 June 1，2011 12:00am GMT 日 期 的 字符 串 
// 例如 ， 如 果 在 New York 运行 该 代码 ， 将 会 输出 'May 31，2011 8:00pm' 
moment ('2011-06-01T:00:00:00.0002'). 

format ('MMMM D, YYYY h:ma'); 


// 格式 : 由 于 使 用 UTC 格式 ， 这 里 将 输出 'June 1，2011 12:00am' 
moment ('2011-06-01T00:00:00.0002'). 

utc(}: 

format ('MMMM D, YYYY h:mma'); 


// 在 2011-06-01 (2011-07-13) 日 期 上 增加 42 天 
moment ('2011-06-01T00:00:00.0002'). 
ECARs 
add(42, 'days'). 
format ('MMMM D, YYYY h:mma'); 


// 在 Los Angeles 时 间 的 June 1, 2011 12:00am GMT (May 31, 2011 5:0 
moment ('2011-06-01T00:00:00.0002'). 

tz('America/Los Angeles'). 

format ('MMMM D, YYYY h:mma'); 


// 代表 时 刻 的 普通 Javascript 日 期 对 象 
moment ('2011-06-01T00:00:00.0002') .toDate(); 


// 当前 UNIX 时 间 惟 ( 自 Jan 1，197012:00am UTC 开始 的 毫秒 数 ) 
moment () .unix(); 
</script> 


Opm) 


除了 提供 日 期 算法 、 格 式 化 和 复杂 的 时 区 支持 (需要 moment-timezonejs 文件 ), Moment 
还 支持 流 式 语法 ， 通 过 它 可 以 使 用 简洁 的 方式 编写 复杂 的 日 期 操作 。 实 际 上 ，Moment 实 


现 了 JavaScript 日 期 没有 做 好 的 所 有 功能 。 不 过 ，Moment 与 普通 的 JavaScript 日 期 ， 
是 AngularJS 日 期 过 滤器 不 是 很 兼容 。 
为 了 学 习 如 何 集成 AngularJS 和 Moment, 将 使 用 Moment 的 时 区 功能 显示 一 个 国 


尤其 


际 事 


件 的 列表 。 例 如 ， 假 设 应 用 将 显示 一 个 欧洲 的 会 议 列表 。 如 果 使 用 原生 的 JavaScript 日 期 ， 
那么 在 Paris 显示 为 8: 00 p.m 的 日 期 在 Tokyo 将 显示 为 5:00 a.m.， 在 New York 则 显示 为 


3:00 p.m 。 某 个 在 遥远 的 时 区 浏览 应 用 的 人 将 难以 分 辨 清楚 会 议 的 实际 时 间 。 在 本 例 


中 ， 


最 合理 的 方式 就 是 以 包含 时 区 的 格式 显示 事件 将 要 发 生 的 会 议 时 间 ， 这 样 用 户 不 论 是 在 


Paris、Tokyo 还 是 NewYork 都 将 看 到 “8:00 p.m in Paris”。 
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集成 Moment 和 AngularJS 的 主要 问题 是 : 在 AngularJS 表达 式 (例如 ngBind 特性 的 右 
侧 ) 中 默认 是 无 法 访问 moment(O) 函 数 的 。 这 意味 着 要 么 需要 在 控制 器 或 者 服务 的 JavaScript 
数据 中 的 所 有 日 期 上 调用 moment(O 函 数 ， 要 么 需要 使 AngularJS 表达 式 可 以 访问 moment() 
函数 。 前 者 非常 简单 ， 因 为 可 以 在 表达 式 中 使 用 Moment 的 链 式 语法 。 不 过 ， 这 样 做 通常 
是 不 实际 的 , 因为 一 旦 加 载 数据 的 API 发 生 了 改变 , 就 需要 修改 控制 器 以 及 HTML。 另外 ， 
因为 moment() 函 数 可 以 正确 地 解析 许多 输入 ， 包 括 UNIX 时 间 戳 、JavaScript 日 期 和 国际 
标准 化 组 织 (ISO) 日 期 字符 串 ， 所 以 通常 在 表达 式 中 将 服务 器 日 期 转换 成 时 刻 (movement) 是 
非常 方便 的 。 

将 moment() 函 数 集成 到 AngularJS 表达 式 中 的 一 个 常见 方式 是 使 用 过 滤器 : 

app.filter('formatTz', function() { 


return function(input, timezone, format) { 
return moment (input) .tz (timezone) .format (format); 


}; 
); 


通过 使 用 formatTz 过 滤器 ， 可 以 采用 标准 的 AngularJS 过 滤器 语法 和 Moment 的 格式 
化 库 ， 用 于 将 日 期 格式 化 为 合适 的 时 区 。 例 如 ， 请 看 下 面 的 会 议 列表 样 例 : 


app.controller('ConcertsController', function($scope) { 
$scope.concerts = [ 
{ 
// GMT +1 => 9pm 
when: "2014-06-01T20:00:00.0002'"， 
where: "Europe/London' 


// GMT +2 => 6pm 
when: "2014-06-04T16:00:00.0002'"， 
where: 'Europe/oslo' 


// GMT +4 => 11pm 
when: "2014-06-22T19:00:00.0002'"， 
where: "Europe/Moscow'" 


1); 
在 HTML 中 ， 可 以 使 用 formatTz 过 滤器 泻 染 该 列表 : 


<div ng-controller="ConcertsController"> 
<div ng-repeat="concert in concerts"> 
Concert #{{$index + 1}}: 
{{concert.when | formatTz:concert.where:'MMMM D, YYYY h:mma'}} 
</div> 
</div> 
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这 将 生成 目标 输出 : 


Concert #1: June 1，2014 9:00pm 
Concert #2: June 4, 2014 6:00pm 
Concert #3: June 22, 2014 11:00pm 


实现 这 个 目标 的 另 一 种 方式 可 以 让 我 们 使 用 Moment 的 链 式 语法 : 使 用 第 7 章 介 绍 的 
改写 SrootScopeProvider.$get 技巧 。 这 将 把 moment(O 函 数 添 加 到 页 面 的 根 作用 域 中 ， 从 而 使 
可 以 从 页 面 的 任何 ( 非 隔离 的 ) 作 用 域 中 访问 它 。 下 面 是 在 配置 时 将 moment() 函 数 添加 到 页 
面 根 作 用 域 的 JavaScript 实现 。 可 以 在 本 章 样 例 代 码 的 moment providerhtml 文件 中 找到 下 
面 的 脚本 片段 


app.config(function(S$rootScopeProvider) { 
var oldGet = $rootscopeProvider.$get; 
$rootscopeProvider.$get = function($injector) { 
Var FootScope = $injector.invoke (oldGet); 


rootscope.moment = window.moment; 


return rootscope; 
}; 
}); 


这 个 JavaScript 代码 将 保证 页 面 的 根 作用 域 总 是 包含 moment() 函 数 。 如 果 有 兴趣 了 解 
提供 者 和 为 什么 之 前 的 代码 可 以 工作 的 原因 ， 第 7 章 包 含 了 对 提供 者 更 详细 的 讨论 。 使 用 
了 之 前 的 配置 块 之 后 ， 就 可 以 在 AngularJS 表达 式 中 使 用 moment() 函 数 了 : 


<div ng-controller="ConcertsController"> 
<div ng-repeat="concert in concerts"> 
Concert #{{$index + 1}}: 
{{moment (concert .when). 
tz (concert.where). 
format ('MMMM D, YYYY h:mma')}} 
</div> 
</div> 


这 两 种 方式 一 一 使 用 过 滤器 和 将 moment() 函 数 附加 到 根 作用 域 一 有 一 些 重 要 的 权 
衡 。 如 果 将 moment(O 函 数 附加 到 根 作用 域 中 ， 就 无 法 在 隔离 作用 域 中 访问 moment() 函 数 ， 
这 将 限制 我 们 使 用 指令 的 能 力 。 另 一 面 ,过 滤器 语法 也 有 限制 的 : 如 果 希 望 使 用 日 期 算法 ， 
就 需要 编写 另 一 个 过 滤器 。 另 一 个 可 以 改善 这 两 个 问题 的 方式 (但 语法 有 点 不 太 优雅 ) 就 是 
使 用 过 滤器 简单 地 返回 一 个 moment 对 象 : 


app.filter('moment', function() { 
return function(input) { 
return moment (input); 
}; 
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Hs 
然后 就 可 以 使 用 该 过 滤器 构造 moment 了 ， 即 使 是 在 隔离 作用 域 中 也 是 如 此 : 


<div ng-controller="ConcertsController"> 
<div ng-repeat="concert in concerts"> 
Concert #{{$index + 1}}: 
{{(concert.when | moment). 
tz (concert .where) . 
format ('MMMM D, YYYY h:mma')}} 
</div> 
</div> 


这 种 方式 还 避免 了 formatTz 过 滤器 固有 的 限制 :可 以 通过 使 用 moment 的 链 式 语法 利 
用 像 日 期 算法 这 样 的 功能 ， 而 不 是 简单 地 格式 化 日 期 。 不 过 ， 这 种 方式 不 利 的 一 面 在 于 在 
模板 中 增加 了 复杂 性 。 尽 管 可 以 使 用 括号 在 过 滤器 的 结果 上 串联 额外 的 操作 ， 但 是 这 将 使 
代码 不 太 容 易 阅 读 ， 也 不 太 容 易 理 解 。 不 过 ， 所 有 这 三 种 方式 都 产生 了 相同 的 输出 ， 在 开 
发 实践 中 选择 哪 种 方式 取决 于 个 人 的 偏好 。 


10.3.2 ”使 用 Mongoose 实现 模式 验证 和 深度 对 象 


Mongoose 是 一 个 NodeJS 和 MongoDB 中 流行 的 对 象 文档 映射 器 (ODM)。 尽 管 它 主 要 是 
一 个 服务 器 端 JavaScript 模 块 ， 但 是 目前 的 实验 版 本 3.9 中 包含 了 在 浏览 器 中 运行 Mongoose 
模式 验证 和 安全 导航 工具 的 能 力 。AngularJS 的 表单 验证 代码 是 非常 强大 的 , 但 是 它 是 受 限 
的 ， 因 为 验证 规则 将 在 HTML 中 指定 。 这 意味 着 需要 在 两 种 不 同 的 语言 中 维护 两 套 不 同 的 
验证 规则 一 个 在 服务 器 中 ， 一 个 在 客户 端 中 。 如 果 服 务 器 使 用 了 NodeJS 和 MongoDB， 那 
么 Mongoose 将 允许 我 们 在 服务 器 验证 和 客户 端 表单 验证 中 使 用 相同 的 模式 。 即 使 服务 器 端 
并 未 使 用 NodeJS 和 MongoDB，Mongoose 的 模式 验证 工具 和 其 他 对 象 工具 对 象 也 是 非常 强 
大 和 可 扩展 的 。 

为 方便 起 见 ， 本 章 的 样 例 代 码 在 mongoosejs 文件 中 包含 了 Mongoose 客户 端 模块 (版 
本 3.9.3)。Mongoose 是 通过 NodeJS 包 管理 器 npm 分 发 的 。 如 果 通 过 npm 安装 Mongoose， 
那么 可 以 在 node modules/mongoose/bin/mongoose.js 中 找到 mongoosejs 文件 。 另 外 ， 如 果 
使 用 Browserify 编译 客户 端 JavaScript, 那么 可 以 使 用 require(mongoose') 包 含 Mongoose 的 
客户 端 模块 。 

Mongoose 的 客户 端 模块 包含 了 两 种 数据 类 型 , 它们 将 是 我 们 主要 使 用 的 类 型 : 模式 和 
文档 。 文 档 可 能 是 一 个 包含 数据 的 嵌 套 对 象 。 模 式 是 文档 应 该 拥有 什么 字段 、 字 段 应 该 包 
含 什么 类 型 以 及 每 个 字段 的 自 定义 规则 的 一 组 规则 文档 只 应 该 有 一 个 模式 , 可 用 于 验证 。 
下 面 是 在 浏览 器 中 使 用 Mongoose 模式 验证 和 安全 导航 的 几 个 样 例 。 可 以 在 本 章 样 例 的 
mongoose_examples.html 文件 中 找到 这 些 样 例 : 


<script type="text/javascript" src="mongoose.js"> 
</script> 
<script type="text/javascript"> 

// 创建 一 个 新 的 Mongoose 模式 
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Var Schema = new mongoose-Schema ({ 
name: { 
Firste String; 
last: String 
}, 
email: { 
type: String, 
// E-mail 需要 匹配 指定 的 RegExp 
match: /.+@.+\..+/, 
// 必须 指定 E-mail 
required: true 
} ， 
favoriteColor: { 
type: String, 
// 最 喜爱 的 颜色 必须 是 枚 举 值 之 一 
enum: ['Red', 'Green', 'Blue'] 
}, 
age: { 
type: Number, 
// 年 龄 至 少 必须 是 21 
min: 21 
} 
}) 7 


// 使 用 模式 创建 一 个 新 的 空白 文档 


var docl = new mongoose.Document ({}, schema); 


docl.validate (function (err) { 
// 'ValidatorError: Path "email is required' 
console.1log(err.errors['email']); 

1); 


docl.name = { 
first: 'James', 
last: "Madison' 
}; 


// 'James Madison' 
console.1log(docl.fullName); 


docl.fullName = 'Thomas Jefferson'; 
// "Thomas " 
console.1og(docl.name .first) 7 


Var doc2 = new mongoose.Document ({}, schema); 
doc2.email = "aeb.c'7 
doc2.age = 20; 
doc2.validate (function (err) { 
// 'ValidatorError: Path "age' (20) is less than minimum 
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// allowed value (21) 
Console.1og(err.-errors['"age']): 
]}) 7 


// 安全 导航 
console.log(doc?2.name.first); // Undefined 
</script> 


最 后 一 个 样 例 演示 了 真正 的 Mongoose 安全 导航 。 实 际 上 ，doc2.name 是 未 定义 的 ， 所 
以 尝试 访问 doc2.name.first 通常 将 触发 可 怕 的 JavaScript 错误 : TypeError: cannot read 
property mame' of undefined。 不 过 ，Mongoose 在 底层 完成 了 一 些 工 作 ， 用 于 保证 在 其 中 一 
个 父 对 象 是 null 或 者 未 定义 时 返回 undefined。 

另外 ， 模 式 可 以 定义 虚拟 属性 ， 这 是 通过 其 他 属性 计算 得 到 的 伪 属 性 。 可 以 使 用 点 语 
法 访问 它们 ， 甚 至 可 以 设置 修改 虚拟 属性 的 规则 。 例 如 ， 可 以 分 别 为 姓 和 名 存储 两 个 不 同 
的 变量 ， 并 为 用 户 的 全 名 使 用 一 个 虚拟 属性 。 当 设置 用 户 的 全 名 时 ， 可 以 配置 虚拟 属性 用 
于 设置 用 户 的 姓 和 名 。 下 面 是 真正 Mongoose 虚拟 属性 的 一 些 样 例 ， 可 以 在 本 章 样 例 代 码 
的 mongoose_examples_virtuals.html 文件 中 找到 它们 : 


<script type="text/javascript"> 
// 创建 一 个 新 的 Mongoose 模式 
Var Schema = new mongoose.Schema({ 
name: { 
first: String， 
last: String 
}, 
email: { 
type: string, 
// E-mail 需要 匹配 指定 的 RegExp 
match: /.+@.+\..+/, 
// 必须 指定 E-mail 
required: true 


’ 
favoriteColor: { 

type: string, 

// 最 喜爱 的 颜色 必须 是 枚 举 值 之 一 
enum: ['Red', 'Green', 'Blue'] 
age: { 

type: Number, 

// 年 龄 至 少 必须 是 21 


min: 21 


1); 


// 'fullName' 是 一 个 虚拟 属性 :由 其 他 属性 组 成 的 伪 属 性 。 
// 当 把 值 赋 给 ' fullName' 属性 时 ， 它 将 会 把 该 值 分 割 ， 并 分 别 赋 给 name .first 和 


// name.last 
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schema. 
Virtual('fullName'). 
get(function() { 
return this.name.first + ' ' + this.name.last; 
}). 
set(function(v) { 
var s = V.split(' '); 
this.set('name.first', s[0]); 
this.set('name.last', s[1]); 
1D); 


// 使 用 模式 创建 一 个 新 的 空白 文档 


var docl = new mongoose.Document ({}, schema); 


docl.name = { 

first: 'James', 
last: 'Madison' 
}; 


// 'James Madison' 
console.log(docl.fullName); 


docl.fullName = 'Thomas Jefferson'; 

// 'Thomas' 

console.log(docl .name.first); 
</script> 


如 你 所 见 ， 在 设置 folIName 属性 时 ，Mongoose 将 应 用 虚拟 属性 的 setter 函数 ， 并 相应 
地 更 新 name.first 和 name.last 属性 。 当 然 ， 我 们 不 需要 定义 .set0 函 数 ， 这 将 使 folIName 属 
性 变 成 只 读 的 。 实 际 上 ， 与 读 / 写 虚拟 属性 相 比 ， 只 读 虚 拟 属性 更 常见 ， 因 为 能 够 读 取 计算 
属性 (使 用 底层 数据 保持 虚拟 属性 的 更 新 ) 是 相当 有 用 的 。 

Mongoose 依赖 于 ECMAScript 5 中 原生 的 defineProperty() 函 数 ， 这 是 最 近 被 接受 的 
JavaScript 语言 标准 ， 用 于 实现 安全 导航 和 创建 虚拟 属性 。 尤 其 是 ，defineProperty() 函 数 将 
允许 我 们 在 对 象 上 定义 可 配置 的 属性 。 通常，JavaScript 不 允许 将 属性 设置 为 只 读 的 、 不 多 
许 让 属性 对 Object.keys0) 函 数 不 可 见 ， 也 不 允许 创建 自 定义 设置 器 和 读 取 器 。 通 过 函数 
defineProperty() 可 以 调整 指定 属性 的 所 有 这 些 参数 ， 它 将 使 安全 导航 和 虚拟 属性 这 样 的 语 
法 糖 变 成 可 能 。 不 过 , 不利 的 一 面 在 于 Mongoose 只 能 在 支持 ECMAScript 5 的 浏览 器 中 工 
作 。 这 意味 着 ，Mongoose 不 支持 Internet Explorer 8 或 者 Safari 4。 

现在 我 们 已 经 了 解 了 Mongoose 的 浏览 器 组 件 是 如 何 工 作 的 ， 接 下 来 将 学 习 如 何 集成 
Mongoose 和 AngularJS.AngularJS 将 与 使 用 defineProperty0 函 数 创 建 的 属性 进行 无 颖 交互 ， 
所 以 我 们 应 该 能 够 从 AngularJS 指令 中 读 取 和 操作 Mongoose 文档 (至 少 在 支持 ES5 的 浏览 
器 中 是 这 样 的 )。 记 住 这 一 点 ， 可 以 使 用 Mongoose 浏览 器 组 件 实现 复杂 的 验证 功能 ， 它 们 
已 经 成 为 了 许多 NodeJS 服务 器 不 可 缺少 的 一 部 分 。 可 以 在 本 章 样 例 的 mongoose_ 
validation html 文件 中 找到 下 面 的 样 例 。 首 先 ,在 script 标 记 中 包含 angularjs 和 mongoosejs， 
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并 定义 模式 。 该 代码 中 使 用 的 模式 类 似 于 之 前 样 例 中 使 用 的 模式 ， 但 是 它 更 适合 于 真正 的 
HTML 表单 。 它 包含 了 4 个 字段 : name.first、name.last、 包 含 了 单词 “Holy Grail” 的 quest 
字符 串 和 必须 是 Red、Green 或 者 Blue 之 一 的 favoriteColor 字符 串 。 
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<script type="text/javascript" src="mongoose.js"> 
</script> 
<script type="text/javascript" 
src="angular.js"> 
</script> 
<script type="text/javascript"> 
Var Schema = new mongoose.-Schema ({ 


name: { 
first: { type: String, default: '' }, 
last: { type: String, default: '' } 
Fe 
quest: { 


type: String, 
match: /Holy Grail/i, 
required: true 

}, 

favoriteColor: { 
type: String, 
enum: ['Red', 'Green', 'Blue'], 
required: true 

f 

]) 7 


Schema . 

Virtual('fullName') . 
get (function() { 

return this.name.first + 

(this.name.last ? ' ' + this.name.last : ''); 

}). 
set(function(v) { 

Var sp = v.indexof(' '); 


| 
this.name.first = v; 
this.name.last = "''; 
} else { 


this.name.first = Vv.substring(0, sp); 
this.name.last = Vv.substring(sp + 1); 
} 
DD); 


Var app = angular.module('myApp', []); 
app .controller ('MyController', function($scope) { 


$scope.doc = new mongoose.Document ({}, schema); 
$scope.validating = false; 
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$scope.err; 
$scope.validate = function() { 
$scope.validating = true; 
$scope.doc.validate (function (err) { 
$scope.validating = false; 
$scope.err = err; 
$scope. $apply (); 
]}) 7 
] 7 
]}) 7 
</script> 


注意 fulIName 虚 拟 属性 的 实现 改变 了 。 之 前 样 例 中 看 到 的 简单 实现 是 一 个 标准 的 
Mongoose 样 例 ， 但 是 在 插入 ngModel 指 令 中 时 ， 它 的 表现 不 是 很 好 。 尤 其 是 ， 当 我 们 希望 
把 Mongoose 虚 拟 属性 插入 ngModel 指 令 中 时 ， 通 常 需要 平滑 地 处 理 边 界 情况 ， 例 如 当 输 入 
字段 是 空 或 者 用 户 只 输入 了 姓 时 。 这 是 因为 AngularJS 将 在 用 户 输入 时 调用 设置 器 更 新 值 ， 
然后 调用 获取 器 获得 写 入 的 值 。 要 注意 ， 对 于 常见 的 边界 情况 ， 虚 拟 属性 将 返回 用 户 输入 
的 值 ， 否 则 ， 输 入 值 可 能 在 用 户 输入 时 改变 。 

另外 注意 ，Mongoose 浏览 器 组 件 在 版 本 3.9.3 中 只 包含 了 一 个 异步 的 validate(O) 函 数 。 
如 果 希 望 在 验证 逻辑 中 使 用 HTTP 调用 或 者 其 他 异步 操作 ， 那 么 这 是 一 个 优点 ， 但 是 它 增 
加 了 额外 的 操作 , 我 们 必须 在 validate0 函 数 的 回调 中 调用 $scope.$apply()。 否 则 ,Angular]S 
不 知道 作用 域 中 的 变量 发 生 了 改变 。 

现在 已 介绍 了 mongoose_validation.html 文件 的 JavaScript， 接 下 来 是 HTML 模板 : 


<body ng-controller="MyController"> 


<hl>My Form</h1> 
<form ng-submit="validate()"> 
<h3>What is your name?</h3> 
<input type="text" ng-model="doc.fullName" placeholder="Full Name"> 
<div> 
<em>First: {{doc.name.first}}</em> 
</div> 
<div> 
<em>Last: {{doc.name.last}}</em> 
</div> 
<h3>What is your quest?</h3> 
<input type="text" ng-model="doc.quest"> 
<h3>What is your favorite color?</h3> 
<input type="text" ng-model="doc.favoriteColor"> 
<hr> 
<input type="submit" value="Validate"> 
<br><br> 
<div ng-show="!validating && !!err"> 
<div ng-repeat=" (key, err) in err.errors"> 
<b>Error validating path {{key}}:</b> 
&nbsp;{{err.message}} 
</div> 
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</div> 
<div ng-show="!validation && !err"> 
<h2>No Errors</h2> 
</div> 
</form> 
</body> 


之 前 的 代码 中 有 一 些 重要 的 细节 值得 一 提 。 第 一 ， 可 以 插入 Mongoose 值 (甚至 是 虚拟 
属性 ) 到 ngModel 指令 中 。 再 次 ， 在 将 读 / 写 虚拟 属性 添加 到 ngModel 指令 中 时 ， 需 要 保证 
虚拟 属性 的 获取 器 总 是 返回 最 后 一 个 设置 器 调用 所 设置 的 值 。 在 虚拟 属性 中 我 们 通常 无 法 
保证 这 个 行为 ， 所 以 就 需要 保证 在 用 户 输入 时 ， 值 不 会 出 现 意外 改变 。 

另 一 个 要 注意 的 重要 细节 是 ，validate() 函 数 只 在 表单 验证 时 调用 。 核 心 AngularJS 验 
证 指令 ， 例 如 ngRequired， 将 在 每 次 输入 模型 改变 时 运行 验证 ， 这 并 不 是 所 有 应 用 的 最 佳 
选择 。Mongoose 的 validate0 函 数 对 何 时 验证 什么 字段 提供 了 更 细 粒 度 的 控制 。 例 如 ， 可 
以 在 favoriteColor 路 径 中 添加 ngChange 验证 。 该 代码 可 以 在 本 章 样 例 代 码 的 mongoose_ 
validation fine.html 文件 中 找到 。 首 先 ， 需 要 在 模式 路 径 上 使 用 doValidate() 函 数 ， 在 单个 路 
径 中 执行 (潜在 的 ) 异 步 验证 : 


$scope.validatePath = function(path) { 
$scope.validating = true; 
Var schemaPath = $scope.doc.schema.path (path); 
schemaPath.doValidate ($scope.doc.get (path) ，function (err) { 
$scope.validating = false; 
if (err) { 
if (!$scope.err) { 
$scope.err = { errors: {} }; 
} 
$scope.err.errors[path] = err; 
} else { 
if ($scope.err && $scope.err.errors[path]) { 
delete $scope.err.errors[path]; 
} 
} 
3 
}; 


该 函数 就 绪 后 ， 将 显 式 地 告诉 Mongoose 在 输入 字段 改变 时 ， 只 验证 favoriteColor 路 径 : 


<h3>What is your favorite color?</h3> 

<input type="text" 
ng-model="doc.favoriteColor" 
ng-change="validatePath('favoriteColor')"> 


最 后 , 注意 这 两 个 样 例 中 都 没有 使 用 AngularJS 验证 指令 , 例如 ngRequired。Mongoose 
的 目标 是 取代 AngularJS 表单 验证 指令 ， 而 不 是 作为 它们 的 补充 。AngularJS 的 表单 验证 指 
令 被 内 嵌 在 文档 对 象 模型 (DOM) 中 ， 它 们 更 加 难以 测试 和 维护 。 不 过 使 用 哪 种 技术 完全 取 
决 于 个 人 偏好 和 应 用 的 需求 。 对 于 简单 的 表单 和 原型 来 说 ， AngularJS 的 表单 验证 可 能 是 非 
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常 有 用 的 。 不 过 ，Mongoose 的 表单 验证 有 一 些 重要 的 优点 : 它 提供 了 AngularJS 表单 验证 
所 缺少 的 无 比 复杂 的 功能 ， 它 独立 于 DOM( 因 此 易于 测试 和 重用 )， 如 果 正 在 使 用 NodeJS 
和 MongoDB 的 话 ， 它 还 可 以 被 重用 。 


10.4 AngularJS 和 ECMAScript 6 


在 本 书 撰写 时 ，JavaScript 语言 标准 的 下 一 版 本 ECMAScript 6 仍然 在 进行 中 。 不 过 ， 
越 来 越 多 的 开发 者 开始 使 用 ECMAScript 6 定义 的 强大 语言 功能 。 尽 管 ECMAScript 6 尚未 
最 终 定稿 。Chrome 和 Firefox 已 经 提供 了 对 一 些 ES6 功能 的 支持 ， 所 以 可 以 为 了 试验 开发 
和 研究 目的 在 AngularJS 中 使 用 它们 。 不 过 ， 在 生产 AngularJS 应 用 中 使 用 ES6 不 是 一 个 
好 主意 ， 因 为 在 本 书 撰写 时 ，IntemetExplorer 或 者 Safari 尚且 没有 支持 本 章 将 要 讨论 的 话 
题 的 正式 发 行 版 本 。 因 此 ， 出 于 本 节 的 目的 ， 需 要 使 用 Chrome (版 本 37 或 者 更 高 版 本 ) 或 
者 Mozilla Firefox (版 本 31 或 者 更 高 版 本 ) 来 查看 样 例 代 码 。 另 外 ， 还 需要 在 Chrome 中 启 
用 ES6 支持 (Firefox 默认 是 启用 的 )。 为 在 Google Chrome 38 中 启用 ES6， 请 在 浏览 器 中 访 
问 chrome:/ flags/， 找 到 并 启用 Enable Experimental JavaScript 标志 ， 然 后 重启 Chrome。 


为 异步 调用 使 用 yield 


ES6 的 一 个 令 人 激动 的 功能 ( 它 席卷 了 整个 NodeJS 社区 ) 是 生成 器 函数 和 yield 关键 字 。 
JavaScript 的 生成 器 非常 类 似 于 Python 的 生成 器 ， 所 以 如 果 熟 悉 Python 的 话 ， 那么 ES6 生 
成 器 看 起 来 应 该 非常 熟悉 。 在 JavaScript 中 ，yield 关键 字 在 管理 异步 函数 调用 时 提供 了 一 
些 极其 优雅 的 功能 。 

有 经 验 的 JavaScript 工程 师 可 能 听 说 过 术语 “callback hell”， 用 于 描述 在 其 他 回调 的 回 
调 中 含有 回调 的 代码 。 但 你 在 意识 到 自己 有 一 个 HTTP 调用 需要 使 用 另 一 个 HTTP 调用 的 
结果 时 ， 可 能 就 已 经 经 历 过 这 个 痛苦 。 通 过 回调 组 织 代码 可 能 会 导致 复杂 的 代码 。 生 成 器 
提供 了 一 种 可 用 的 方式 ， 本 节 稍 后 将 进行 讲解 。 

可 在 http_yield.html 文件 中 找到 本 节 的 样 例 代码 。 该 文件 包含 了 一 个 称 为 co 的 开源 模 
块 ， 它 为 运行 生成 器 函数 提供 了 一 个 方便 的 封装 器 。 

那么 如 何 使 用 yield 关键 字 从 Yahoo Finance API 加 载 Google 股票 价格 呢 ? 下 面 是 具体 
的 实现 : 


function convertToAPlusPromise($q, promise) { 
Var deferred = $q.defer(); 
promise. 
Success (function (data) { 
deferred.resolve (data); 
]}) - 
error (function (err) { 
deferred.reject (err); 
Fx 


return deferred.promise; 
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} 


function MyController ($scope, S$http, $q) { 

Var BASE = 'http://query.yahooapis.com/vl/public/yql'; 

Var query = 'select * from yahoo.finance.quotes ' + 
"where symbol in (\'GOOG\')'; 

Var url = BASE + "2" 二 
'q="' + encodeURIComponent (query) + 
'&format=json&diagnostics=true' + 
'genv=http://datatables.org/alltables.env' + 
'&callback=JSON CALLBACK'; 


co (functionx () { // * 不 是 一 个 输入 错误 ， 这 将 把 该 函数 标记 为 生成 器 
Var result; 
try { 
result = yield convertToAPlusPromise($q, $http.jsonp (url)); 
$scope.result = result; 
} catch(e) { 
console.log('Error occurred: ' + e); 
} 
DO; 
关于 之 前 的 代码 有 两 个 重要 的 细节 需要 注意 。 第 一 ，yield 关键 字 将 操作 约定 。 约 定 是 
一 个 围绕 异步 操作 提供 语法 糖 的 对 象 。yield 关键 字 期 望 得 到 一 个 与 Promises/A+ 标 准 一 致 
的 约定 ， 不 幸 的 是 ， 它 与 $Shttp 服务 返回 的 约定 完全 不 兼容 。 不 过 ，AngularJS 核心 包含 了 
流行 约定 库 的 一 个 轻 量 级 实现 : $q 服务 ， 它 符合 Promises/A+ 标 准 。 之 前 所 示 的 
convertToAPlusPromise() 将 把 $http 服务 返回 的 约定 转换 成 由 $q 服务 返回 的 约定 一 一 也 就 是 
可 以 与 yield 一 起 使 用 的 约定 。 
第 二 , 之 前 的 代码 中 没有 回调 。 关键 字 yield 足够 聪明 , 它 可 以 在 异步 调用 结束 时 将 上 
面 promise.resolve() 返 回 的 值 写 入 到 结果 变量 中 。 通 过 使 用 co 库 ， 可 通过 类 似 于 同步 的 方 
式 执行 JavaScript 的 基本 异步 HTTP 调用 。 
但 是 当 错 误 发 生 时 (例如 Yahoo Finance API 不 可 访问 ) 会 出 现 什么 情况 呢 ? 。 这 就 是 使 
用 try/catch 块 的 原因 了 !yield 关键 字 在 对 应 的 约定 被 拒绝 ( 当 约 定 产生 错误 时 , Promises/A+ 
标准 所 使 用 的 术语 ) 时 将 抛 出 一 个 错误 。 这 意味 着 可 以 使 用 简洁 的 try/catch 语法 捕捉 HITP 
错误 ， 而 不 是 必须 指定 错误 处 理 程序 函数 。 


10.5 小 结 


在 本 章 ， 我 们 学 习 了 AngularJS 核心 之 外 的 几 个 项 目 ， 它 们 可 以 帮助 以 新 的 方式 使 用 
AngularJS。 尤 其 是 ， 我 们 学 习 了 如 何 使 用 Ionic 框架 通过 AngularJS 构建 原生 的 移动 应 用 ， 
如 何 使 用 MomentS 处 理 复杂 的 日 期 功能 ， 以 及 如 何 为 模式 驱动 的 表单 验证 集成 
MongooseJS。 还 有 许多 其 他 JavaScript 模块 可 以 扩展 AngularJS: 在 www.npmjs.org 或 者 
www.bower.io/search 中 搜索 “AngularJS” 可 以 找到 更 多 相关 信息 。 
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许多 网 站 都 可 有 助 于 学 习 关 于 AngularJS 的 更 多 知识 ， 并 连接 到 AngularJS 社区 。 
AngularJS 的 流行 已 经 激励 了 大 量 在 线 内 容 的 产生 , 从 简单 的 博客 到 复杂 的 视频 , 它们 可 以 
提供 大 多 数 AngularJS 疑问 和 问题 的 答案 。 另外, 通过 下 面 这 几 个 JavaScript 模块 库 可 以 查 
找 和 安装 AngularJS 的 扩展 : 


AngularJS(http://www.angularjs.org) 一 一 官方 AngularJS 网 站 提供 了 下 载 、 教 程 、 论 
坛 、 开 发 者 指南 、 应 用 编程 接口 (APD 参 考 以 及 更 多 相关 内 容 。 这 是 获得 AngularJS 
基本 信息 并 连接 到 大 型 社区 的 理想 网 站 。 
Egghead.io(http://egghead.i0) 一 一 Egehead.io 是 目前 AngularJS 视频 教程 的 起 源 。 这 
些 教程 都 是 简短 视频 (通常 在 5 分 钟 左 右 )， 通 过 展示 一 个 开发 者 在 集成 开发 环境 
(IDE) 中 编写 代码 的 方式 演示 AngularJS 概念 。Egghead.io 教程 是 快速 解决 关于 
AngularJS 特性 特定 问题 的 理想 网 站 。 

Bower(http://bower.io) 一 一 Bower 是 为 客户 端 JavaScript 和 层 准 样式 表 (CSS) 构 建 的 
包 管 理 器 。 Bower 托管 了 众多 AngularJS 包 , 而 且 bower.io 有 一 个 方便 的 搜索 引擎 ， 
所 以 我 们 可 以 轻松 找到 特定 的 AngularJS 扩展 。 

npm(http://www.npmijs.org) 一 一 npm 开始 是 作为 NodeJS 的 包 管理 器 ， 但 是 多 亏 了 像 
Browserify( 关 于 Browserify 的 更 多 信息 参见 第 3 章 “ 架 构 ”) 这 样 的 模块 ， npm 现在 
也 是 客户 端 模块 的 一 个 流行 的 仓库 。 正 式 的 npm 网 站 包含 了 一 个 方便 的 搜索 引擎 ， 
可 以 帮助 找到 有 用 的 AngularJS 模块 。 

Thinkster(http:/www-thinkster io) 一 一 类 似 于 Egghead.io, Thinkster 提供 了 视频 教程 。 
不 过 ，Thinkster 教程 通常 被 组 织 为 完整 的 课程 ， 而 不 是 简单 的 独立 视频 ， 它 更 加 专 
注 于 全 栈 开发 ， 而 不 是 单独 面向 AngularJS。 如 果 你 有 兴趣 了 解 使 用 AngularJS 和 
Django, Ruby on Rails, Ionic 或 者 作为 MEAN 栈 的 一 部 分 ，Thinkster 是 一 个 完美 的 


AngularJS 高 级 编程 


336 


® AngularJS - Learming(http:/Wgithub.comyjmcunningham/AngularJS-Learning) 一 一 含有 
AngularJS 内 容 的 最 流行 社区 的 列表 ， 这 些 内 容 包括 众多 高 质量 的 AngularJS 文章 、 
样 例 应 用 和 学 习 资源 。 

® angular/angular.js(http://github.com/angular/angular.js) 一 一 官方 AngularJS 代码 库 ， 其 
中 包含 了 报告 问题 的 机 制 , 并 且 可 以 通过 GitHub 的 Pull Requests 特性 向 AngularJS 
核心 中 贡献 代码 。 

e@ AngularJS Code(http://code.angularjs.org) 一 一 该 页 面包 含 了 所 有 版 本 AngularJS 的 下 
载 链接 ， 包 括 像 angular-sanitize 这 样 的 非 核心 模块 。 如 果 想 深入 学 习 AngularJS 代 
码 或 者 只 是 希望 下 载 特定 的 模块 ， 那 么 这 是 查找 目标 文件 的 理想 位 置 。 


